围绕其中心旋转 SVG 图标答案

【问题标题】：Rotating SVG icon around its center围绕其中心旋转 SVG 图标
【发布时间】：2020-05-09 22:04:02
【问题描述】：

我正在尝试围绕其中心旋转一个 SVG 图标，但这似乎并不像人们想象的那样。这是带有我要旋转的图标的原始 SVG。

<svg width="692" height="502" style="background-color:white" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

<symbol id="ToiletVertical" fill="none" viewBox="0 0 42 72">
    <path d="M40.762.542H.772v17.98h39.99V.542zM40.762 44.279s1.128 26.263-19.584 26.263C-.252 70.542.871 44.279.871 44.279l-.1-25.757h39.991v25.757z" fill="#fff" stroke="#000"/>
    <path d="M23.946 8.017h-6.357v3.03h6.357v-3.03z" fill="#fff" stroke="#000"/>
</symbol>

<path d="M481 447 499 447 499 479 481 479 "/> <use xlink:href="#ToiletVertical" x="481"  y="447" width="18.0" height="32.0"  fill="none" stroke="black" class="icon 5"/>
</svg>

使用transform="rotate(180)" 只会完全关闭图标。如果我给旋转相应的 (x, y) 坐标，将得到相同的结果。删除<use> 的x 和y 属性并使用transform="translate(481, 448) rotate(180) 将旋转图标，但它仍会移开并且不会绕其中心移动。有人能告诉我我在这里缺少什么吗？

【问题讨论】：

尝试 CSS 和 transform-box/transform-origin 代替：stackoverflow.com/a/47399098/1869660

标签： svg

【解决方案1】：

在 SVG 中，您可以围绕给定点旋转元素，例如 transform="rotate(90,490, 463)" 将元素围绕点 x=490 和 y=463 旋转 90 度。

您需要计算使用元素的中心并围绕该点旋转它。 use 元素有 x="481" 和 width="18"。中心的 x 是 481 + 18/2 = 490。对 y 做同样的事情，你会得到 463。

<svg viewBox="440 410 100 100" width="300" style="background-color:white" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

<symbol id="ToiletVertical" fill="none" viewBox="0 0 42 72">
    <path d="M40.762.542H.772v17.98h39.99V.542zM40.762 44.279s1.128 26.263-19.584 26.263C-.252 70.542.871 44.279.871 44.279l-.1-25.757h39.991v25.757z" fill="#fff" stroke="#000"/>
    <path d="M23.946 8.017h-6.357v3.03h6.357v-3.03z" fill="#fff" stroke="#000"/>
</symbol>

<path d="M481 447 499 447 499 479 481 479 "/>
  <use xlink:href="#ToiletVertical" x="481"  y="447" width="18.0" height="32.0"  fill="none" stroke="black" class="icon 5" transform="rotate(90,490, 463)"/>
</svg>

【讨论】：