javascript — переменный текст в SVG-определенном текстовом теге

Переменный текст в определенном текстовом теге SVG

Я хотел бы повторно использовать определенные формы в SVG, но с переменным текстом. Возможно ли следующее?

 {amp}lt;svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"{amp}gt; {amp}lt;defs{amp}gt; {amp}lt;g id="shape"{amp}gt; {amp}lt;rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" /{amp}gt; {amp}lt;text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00"{amp}gt;variable_text{amp}lt;/text{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;/defs{amp}gt; {amp}lt;g transform="translate(0 0)"{amp}gt; {amp}lt;use xlink:href="#shape" text="test" /{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;g transform="translate(100 0)"{amp}gt; {amp}lt;use xlink:href="#shape" text="test2" /{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;/svg{amp}gt; 

РЕДАКТИРОВАТЬ: так как решение, вероятно, будет включать в себя некоторый JavaScript, я добавил тег.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector