Вращение значка SVG вокруг его центра

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). Удаление атрибутов x и y для <use> и использование transform="translate(481, 448) rotate(180) приведет к повороту значка, но он все равно сдвинется с места и go не относительно его центра. Может ли кто-нибудь сказать мне, что мне здесь не хватает?

Answer 1

В SVG вы можете вращать элемент вокруг заданной точки, например, это transform="rotate(90,490, 463)" поворачивает элемент на 90 градусов вокруг точки x = 490 и y = 463.

Вам нужно вычислить центр элемент использования и поверните его вокруг этой точки. Элемент 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>