使用 d3 旋转 SVG 图像元素

Question

我想使用 d3.js 旋转 SVG 元素内的图像

这是元素的结构：

四处搜索似乎是一件容易的事。我尝试的第一件事是将图像元素编辑为 HTML 并插入属性transform="rotate(90)"，但是图像消失了，即使删除此属性我也无法恢复原始图像。

我需要做的是旋转图像元素，因为它始终处于垂直位置。我的意思是，如果我得到一个顺时针方向为 90 度的图像，我想逆时针旋转 90 度。如果我得到一个方向为 270 度的图像，我需要将其逆时针旋转 270 度，依此类推。

我从后端得到这个方向值，所以我需要一个函数来更新图像的旋转，但即使是浏览器中图像的基本旋转也不起作用，我不知道我在做什么应该这样做。

甚至不确定我是否应该旋转图像元素或 SVG 本身。甚至是 SVG 的容器（在屏幕截图中，类为 svg-container 的 div）。

我尝试的另一件事是使用 css 类，但图像被裁剪。我使用的类是 answer 中的类（尝试用于图像及其容器）。

非常感谢任何帮助，谢谢

Answer 1

SVG 属性和 CSS 样式的区别：

• 单位：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"
  

希望我的评论能有所帮助。