SVG, текст, шрифт с фиксированной шириной/высотой

Я пытаюсь получить элемент «текст» SVG внутри элемента «прямоугольник» svg. например В приведенном ниже примере я использовал моноширинный текст из 5 символов с размером шрифта 100 пикселей и ожидал, что ограничивающий прямоугольник будет рядом с текстом.

Но есть пустой пробел справа от текста.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000">
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>    
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg>

Какие селекторы CSS следует использовать для элемента «текст»?

Примечание. Я не хочу использовать метод «текст на пути». Просто шрифт фиксированного размера.

Спасибо;


svg fonts css bounding-box
person Pierre    schedule 13.11.2009    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Размер шрифта определяет его высоту, а не ширину; и символы редко бывают квадратными.

Насколько мне известно, с помощью CSS невозможно надежно определить ширину даже моноширинного текста.

Что ж, в CSS3 есть ch unit, то есть ширина символ 0. Это будет работать для моноширинного текста. Но это не поддерживается в SVG.

Конечно, вы можете просто установить фиксированную ширину в пикселях. Мне подходит ширина 300 пикселей. Но тогда, если кто-то другой использует другой моноширинный шрифт, эта фиксированная ширина может быть отключена. Если вы добавите font-family:monospace;font-size:100px; к <rect>, вы можете установить ширину прямоугольника в ems. Но не думаю, что это надежнее.

Однако вы можете использовать сценарии. Вы можете использовать getComputedTextLength(), чтобы получить длину текста текстовый элемент:

<script type="text/javascript">
document.getElementById('rect').setAttribute(
    'width',
    document.getElementById('text').getComputedTextLength()
);
</script>

Добавление этого в конец вашего SVG (и добавление соответствующих идентификаторов элементов) работает, по крайней мере, в Opera 10, Firefox 3.5 и Safari 4.0.

И пока вы это делаете, вы также можете использовать getBBox(), чтобы получить ограничивающую рамку текстового элемента, чтобы вы могли установить высоту прямоугольника в соответствии с размером шрифта, если вы когда-нибудь решите изменить размер шрифта.

person mercator    schedule 14.11.2009