동일한 SVG 구조 내에서 SVG 연결

Question

내 HTML 문서에 두 개의 SVG 구조가 있습니다. 예

<svg width="8cm" height="3cm" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <desc>Local URI references within ancestor's 'defs' element.</desc> 
    <defs> 
    <linearGradient id="Gradient01"> 
    <stop offset="20%" stop-color="#39F" /> 
    <stop offset="90%" stop-color="#F3F" /> 
    </linearGradient> 
    </defs> 
    <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" /> 
</svg> 

및

<svg width="8cm" height="3cm" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="Gradient01"> 
    <stop offset="20%" stop-color="#85F" /> 
    <stop offset="90%" stop-color="#35F" /> 
    </linearGradient> 
    </defs> 
    <rect x="10cm" y="10cm" width="60cm" height="10cm" fill="url(#Gradient01)" /> 
</svg> 

SVG 구조 모두에서 ID 「Gradient01 "와"이 LinearGradient 태그 "가 비록 말해, 제 SVG 구조의 RECT 또한"이 LinearGradient 뒤에 "첫번째 것의. (전체 문서에서 ID를 검색 할 때)

어쨌든 SVG 구조 내에서만 항상 링크됩니다. (제 경우로는 ID를 변경할 수 없습니다)

Answer 1

svg를 독립형 이미지로 변환 한 다음 또는 <object> 태그를 사용하여 HTML 문서에 포함 할 수 있습니다.