Повернуть текст в SVG

Я получил карту с SVG, который выглядит как Chart Повернуть текст в SVG

Теперь я хочу, чтобы повернуть текст как Chart

Моего SVG root является следующей

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" baseProfile="full" 
    viewbox="-75 0 1075 800" 
    transform="translate(0, 750) scale(1, -1)" 
    width="1000" height="800"> 
</svg>

Если я попробуйте повернуть текст с помощью

<text x="-70" y="50%" stroke="blue" transform="rotate(90)">U [mV]</text>

текст исчезает.

<text x="-70" y="50%" stroke="blue" transform="rotate(90 -70 50%)">U [mV]</text>

ничего не происходит.

Что мне делать, чтобы повернуть три текстовых объекта, показанных на втором изображении? Благодарю.

источник

2015-04-29 mburm

Не уверен, что 100%, что происходит, но я подозреваю, что это «вращающаяся» вокруг неправильной точки, и текст заканчивается в другом месте, наверное, выключение экрана в вашем первом случае. Попробуйте повернуть всего на 1 и увидеть, если он движется немного, что может дать вам некоторое представление о том, что именно происходит. – Flynn1179

'transform' атрибуты в svg не поддерживают процентные значения (пока), они, надеюсь, сделают это в будущем. Скрипка может быть хорошей, но ваша проблема очень вероятна из-за перевернутой системы координат, и есть несколько способов исправить это. –

Существует проблема [ответ] (http://stackoverflow.com/a/12109483/4235784) с аналогичной проблемой, которая также должна работать для вас. Это, в частности, касается использования поворотов на элементе, который позиционируется некоторым процентом. Если вы не привязаны к позиционированию на '50%' в качестве относительного значения, для него есть более простые решения. В этом случае будьте более конкретными и предоставите еще один код, чтобы получить хороший ответ. – altocumulus

следующие работы для меня сейчас:

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" baseProfile="full" 
    viewbox="-75 0 1075 800" 
    width="1000" height="800"> 

    <g transform="translate(0, 750) scale(1, -1)"> <!-- hint from @altocumulus --> 
     ... 

     <g transform="translate(-75, 375) scale(1, -1) rotate(-90)"> 
      <!-- 
       translate(x, y) => create a new local coordination system 
       with the point of origin at this point 
      --> 

      <text stroke="blue">U [mV]</text> 
     </g> 

     ... 
    </g> 
</svg>

источник

2015-05-05 06:07:22 mburm

ответ

Смежные вопросы