В SVG (для веб-браузеров), если я добавлю <text>
-элемент и добавлю к нему текст, общая отображаемая ширина текстовой строки будет меняться в зависимости от масштаба текста.
Допустим, я добавляю « ммммммммммммммммммммммммммА » в качестве текста, затем я хочу нарисовать вертикальную линию (или другой точно расположенный элемент), пересекающий самый последний символ.Работает нормально, но если я уменьшу, текст станет короче или длиннее, и линия больше не будет пересекать текст в нужном месте.Ошибка может составлять до +/- 5 символов ширины, что недопустимо.Ошибка также непредсказуема, при увеличении на 150% и 160% можно добавить длину в 3 символа, а на 155% на 2 длины меньше.
Мое увеличение реализовано в виде преобразования масштаба для корневого элемента моего холста, который является<g>
.Я попытался умножить размер шрифта на 1000x и уменьшить масштаб одинаково при трансфокации и наоборот, если это была ошибка с плавающей запятой, но результат тот же.
Я нашел textLength
-attribute [1], который должен регулировать общую длину, чтобы текст всегда заканчивался там, где я выбрал, но он работает только в Webkit.Firefox и Opera, похоже, не заботятся об этом значении (еще не пробовали в IE9).
Есть ли способ сделать текст точно позиционированным, не прибегая к самодельному заполнению контуров шрифтов?
[1] http://www.w3.org/TR/SVG11/text.html#TextElementTextLengthAttribute
Обновление
Фрагмент структуры, которую я использую
<svg>
<g transform="scale(1)"> <!--This is the root, i'm changing the scale of this element to zoom -->
<g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc -->
<text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text>
</g>
</g>