Туториал по SVG

Элемент SVG

Элемент <textPath> SVG Элемент <tspan> SVG

Элемент <tref> SVG

Элемент <tref> SVG используется для ссылки на текст, определенный в элементе <defs>. Таким образом, вы можете несколько раз отображать один и тот же текст в SVG-изображении, не включая элемент <text> несколько раз.

Онлайн пример

Это пример:

Пример

<svg width="100%" height="100%" viewBox="0 0 1000 300"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　Указанные символы данных　(oldtoolbag.com)　</text>
　　</defs>
　　<text x="100" y="100" font-size="45">
　　　　Внутренние символы данных　(oldtoolbag.com)　</text>
　　<text x="100" y="200" font-size="45" fill="red">
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　Использование элемента "rect" для отображения контура канвы
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/>

Проверьте, как работает < › / › >

Эффект изображения после выполнения:

Обратите внимание, как элемент <text> (внутри элемента <defs>) имеет атрибут id. Значение этого атрибута id указывается через атрибут xlink:href, ссылающийся на <tref>.

Элемент <textPath> SVG Элемент <tspan> SVG