Как масштабировать SVG-прямоугольник, чтобы он соответствовал текстовому элементу SVG

Question

Итак, вот проблема:

Я пытаюсь создать динамические кнопки с текстом.Текст будет сгенерирован динамически, поэтому объект svg не знает размер текста.Я хочу сделать две вещи, и я надеюсь, что SVG сделает это

Во-первых, я хочу, чтобы левый и правый края элемента svg остались прежними, даже если я масштабирую элемент по горизонтали

Проблема в том, что мне нужно установить ширину в svg, в противном случае она не отображается при отображении страницы.Также на кнопках «Домой» и «Блог» видно, что край сжат.Я хочу, чтобы край оставался неизменным независимо от количества текста в элементе.

Кроме того, я не могу правильно настроить масштаб или ширину даже с помощью JavaScript .getComputedTextLength()

Любая помощь или точка в правильном направлении была бы очень полезна

Answer 1

Кнопки, размер которых соответствует их текстовому содержимому, - это функциональность, которую можно использовать с помощью getBBox (Raphael) Raphael. Использование этой библиотеки js означает, что вы неявно используете SVG или VML, и эта функция более проста, если обратиться к этой библиотеке JavaScript.Посмотрите на функцию getBBox () в действии, вы можете посмотреть пример Autobox здесь:

http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2