我想使用 d3.js 在 SVG 元素內旋轉影像
這是元素的結構： 
環顧四周，這似乎是一件容易的事。我嘗試的第一件事是將影像元素編輯為 HTML 并插入屬性transform="rotate(90)"，但影像消失了，即使洗掉此屬性我也無法取回原始影像。
我需要做的是旋轉影像元素，因為它總是處于垂直位置。我的意思是，如果我得到一個方向為順時針 90 度的影像，我想逆時針旋轉 90 度。如果我得到一個方向為 270 度的影像，我需要將它逆時針旋轉 270 度，依此類推。
我從后端得到這個方向值，所以我需要一個函式來更新影像的旋轉，但即使是瀏覽器中影像的這種基本旋轉也不起作用，我不知道我應該怎么做去做。
甚至不確定我是否應該旋轉影像元素或 SVG 本身.. 甚至是 SVG 的容器（在螢屏截圖中帶有 class 的 div svg-container）。
我嘗試的另一件事是使用 css 類，但影像被裁剪。我使用的類是這個答案中的類（為影像及其容器嘗試過）。
非常感謝任何幫助，謝謝
uj5u.com熱心網友回復：
SVG 屬性和 CSS 樣式的區別：
- unit: svg 屬性不需要指定單位，而 css 樣式應該指定一個單位。
<- svg -> <svg> <imgage transform="translate(100, 100) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64" - css 樣式具有transform-origin和默認值是元素的中心
<- html: the default transform-origin to be: (50px, 50px) -> <img width="100" height="100" style="rotate(90deg);" src="url or base64" /> <- svg need first translate to the center then rotate -> <svg> <imgage width="100" height="100" transform="translate(50, 50) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"
希望我的評論能有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/388849.html
標籤：javascript 图片 svg d3.js 回转
上一篇：基于另一個欄位SQL遞增日期