Повернуть объект в SVG - PullRequest
Новая
       10

Повернуть объект в SVG

3 голосов
/ 29 февраля 2012

Я только начинаю работать с SVG и сейчас пробую вращающиеся объекты.

У меня есть исходный холст, и я создал свою собственную функцию перетаскивания, поэтому при mousedown перетаскивание инициализируется, а мышка останавливается.Проблема, с которой я сталкиваюсь, заключается в том, что когда я вращаю объект, кажется, что он изменяет x и y.Это видно, когда я пытаюсь перетащить объект.Кто-нибудь знает, как обойти это, чтобы x и y были "нормализованы" относительно угла поворота?

Вот мой код. 

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

Спасибо

1 Ответ

4 голосов
/ 29 февраля 2012

rotate параметры дают вам угол и центр вращения (см., Например, MDN ).А как насчет атрибутов width и height в вашем тексте?Это не является частью стандарта с здесь .Если вы хотите изменить размер вашего текста, сделайте это, используя font-size в стиле.

Если вы хотите повернуть текст вокруг его центра (элемента текста), вы можете использовать, например, следующее:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="900" height="400"  xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;">
     SVG test 
   </text>
 </svg>
...