Текст SVG - общая длина изменяется в зависимости от масштаба - PullRequest
1 голос
/ 16 января 2011

В 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>

1 Ответ

1 голос
/ 16 января 2011

Интересно, что поскольку сборка webkit мне не удалась, textLength ( w3c testcase ). Не могли бы вы опубликовать свой пример?

Говоря об Opera, мы поддерживаем атрибут 'textLength', как описано здесь .

Другой вариант - использовать метод getBBox , чтобы найти подходящую позицию для рисования линии, которая должна работать во всех браузерах.

...