使用 d3 旋转 SVG 图像元素

Posted 2023-02-21

【中文标题】使用 d3 旋转 SVG 图像元素

【英文标题】：Rotate SVG image element using d3

【发布时间】：2022-01-21 17:12:11

【问题描述】：

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

这是元素的结构：

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

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

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

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

我尝试的另一件事是使用 css 类，但图像被裁剪。我使用的类是 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   style="rotate(90deg);" src="url or base64" />

<- svg need first translate to the center then rotate ->
<svg>
  <imgage   transform="translate(50, 50) rotate(90)" href="url or base64" />
</svg>

<- html ->
<img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"

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