SVG повернуть текст с% как единица

Question

Я пытаюсь повернуть текст svg. Я получаю позицию текста как% i.e. 15%, вызывая php-функцию из xslt. проблема в том, что я не могу повернуть объект svg, используя%. он работает, если вместо этого я использую цифровую цифру. Ниже я представить проблему как упрощенный:

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full"> 
    <text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text> 
    <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/> 
</svg> 

этот рис находится в середине моего браузера экрана

И я хочу, что это выглядит следующим образом:

но DonT работа из-за%

transform="rotate(-90 **50% 50%**)" 

это требование для меня использовать% для координат. Любые идеи или решение моей проблемы?

Благодарим вас за продвижение.

Answer 1

Вы можете перевести координаты, используя внутренний элемент <svg>. В приведенном ниже примере отображается как «Я хочу, чтобы это выглядело так» растровое изображение в Firefox.

Если вы не видите текст в любом браузере, который вы используете, попробуйте добавить overflow = "visible" к внутреннему элементу <svg>, чтобы вы могли видеть, где он заканчивается. Не все браузеры поддерживают атрибут dominant-baseline, поэтому вам может понадобиться вместо этого использовать атрибут y для текста.

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <svg x="50%" y="50%" width="100" height="100"> 
     <text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text> 
    </svg> 
    <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/> 
</svg>