Question

我正在尝试围绕其中心旋转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)将旋转图标，但它仍将移动并且不会围绕其中心移动。有人可以告诉我我在这里想念什么吗？

Answer 1

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

您需要计算use元素的中心并将其围绕此点旋转。 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>

围绕其中心旋转SVG图标

1 个答案: