SVG, текст, шрифт с фиксированной шириной / высотой - PullRequest
Новая
       30

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

7 голосов
/ 14 ноября 2009

Я пытаюсь получить текстовый элемент SVG, подходящий внутри элемента 'rect' 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-селекторы я должен использовать для элемента 'text'?

Примечание: я не хочу использовать метод text-on-a-path. Просто шрифт с фиксированным размером.

Спасибо;

1 Ответ

8 голосов
/ 14 ноября 2009

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

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

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

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

Однако вы можете использовать скрипты. Вы можете использовать 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(), чтобы получить ограничивающий прямоугольник текстового элемента, чтобы вы могли установить высоту прямоугольника так же, как и размер шрифта, на случай, если вы когда-нибудь решите изменить размер шрифта.

...