使用 d3 旋转 SVG 图像元素

Question

我想使用 d3.js

在 SVG 元素内旋转图像

这是元素的结构：

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

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

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

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

我尝试的另一件事是使用 css class 但图像被裁剪了。类我使用的是这个 answer 中的那些（尝试了图像及其容器）。

非常感谢任何帮助，谢谢

Answer 1

SVG 属性与CSS 样式的区别有待解决：

unit: svg 属性不需要指定单位，而 css style 应该指定一个单位。

<- 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"

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

使用 d3 旋转 SVG 图像元素

Rotate SVG image element using d3

javascript

svg

image

rotation

d3.js