Поворот текста SVG вокруг центра

У меня есть текст с textContent "Design" и text-anchor в качестве начала, который был преобразован с помощью css для поворота на 45 градусов. поэтому он вращается. проблема в том, что мне нужно настроить (x, y) положение текста после моего поворота, чтобы отобразить текст между тиками, как показано на ожидаемом рисунке. Как я могу достичь этого.

Результат: http://imageshack.us/content_round.php?page=done&l=img404/2711/result1h.png

Ожидается: http://imageshack.us/content_round.php?page=done&l=img266/5138/expected1.png

    <svg>
    <text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start">Design</text>
    </svg>

Спасибо, Гоури.


jquery-svg
person Code Break    schedule 24.05.2013    source источник
comment
ссылки, которые вы разместили, битые   -  person majorBummer    schedule 02.11.2015

Ответы (2)


arrow_upward
13
arrow_downward

Текст должен быть центрирован по горизонтали и вертикали, чтобы вращение не сместило его:

<text x="100" y="50" text-anchor="middle"
    dominant-baseline="central" transform="rotate(0, 100, 50)"></text>

text-anchor выравнивает текст по горизонтали
dominant-baseline выравнивает текст по вертикали

svg {
    width: 200px; height: 100px;
    text-align: center;
    border: solid 1px blue;
    font-family: monospace;
}
<svg>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(180, 100, 50)">
       Hello World
   </text>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(0, 100, 50)">
       Hello World
   </text>
</svg>

пример: http://jsfiddle.net/e4bAh/131/

person Mingwei Samuel    schedule 04.05.2015
comment
Гораздо проще, чем каждый ответ, который я видел в другом месте, и он самый точный! Спасибо за jsfiddle - person kevlarr; 09.10.2017

arrow_upward
5
arrow_downward

используйте 1_

Где cx, cy — координаты центра экрана (или поворота).

Это хороший пример

person user2415826    schedule 24.05.2013
comment
я использовал transform=rotate(45,100,100), мне нужно изменить позицию текста после поворота - person Code Break; 24.05.2013
comment
Проблема состоит в том, чтобы определить центр текста svg. - person Mish.k.a; 22.09.2016