
하나의 작은 SVG 파일(Inkscape로 생성됨)을 가져와 다른(더 큰) 파일에 포함하거나 연결하고 싶습니다. 브라우저에 표시될 때 더 큰 것의 자리 표시자 안에 작은 것이 나타나는 것을 볼 수 있기를 바랍니다.
가능합니까?
답변1
나중에는 고정 해상도로 렌더링되고 현재 문서에서 일반 벡터 객체처럼 크기가 조정되지 않으므로 선호합니다 <use>
.<image>
http://www.w3.org/TR/SVG11/struct.html#ImageElement
그러나 요소는 <use>
전체 SVG 파일을 참조할 수 없으며 해당 xlink:href
속성은 SVG 문서 내의 요소/조각에 대한 참조입니다(http://www.w3.org/TR/SVG11/struct.html#UseElement). 'use' 요소는 로컬 또는 비로컬 리소스를 참조할 수 있습니다.
예:
MyLibrary.svg:
<svg (...)>
<rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
style="fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="upper-left-blue" height="200"/>
UseParts.svg:
<use x="0" y="0" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="MyLibrary.svg#upper-left-blue" xlink:type="simple"
xlink:actuate="onLoad" height="400" id="use8793" xlink:show="embed"/>
해당 기능에 대한 지원은 SVG 편집자/뷰어에 따라 다를 수 있습니다. 단, 내가 아는 한 이 기능은 적어도 Inkscape, Firefox 및 Batik에서 작동해야 합니다.
답변2
사용image
요소를 선택하고 SVG 파일을 참조하세요. 재미삼아 다음을 다른 이름으로 저장하세요 recursion.svg
.
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="-50" cy="-50" r="30" style="fill:red" />
<image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
원천:https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238