SVG 가이드

SVG 요소

SVG <tref> 요소

SVG <tref> 요소는 <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>
　　<!--　canvas의 경계를 "rect" 요소로 표시합니다　-->
　　<rect　x="1"　y="1"　width="598"　height="198"
　　　　　　　　fill="none"　stroke-width="2"　/></svg>

테스트를 해보세요‹/›

이미지 효과 실행 후:

이렇게 <text> 요소(요소 내부 <defs>)가 id 속성을 가지고 있는지 주목하세요. 이 id 속성 값은 xlink:href 속성에서 <tref>를 참조합니다.

SVG <textPath> 요소 SVG <tspan> 요소