SVG 문서가 있는데 그 안에 외부 svg 이미지를 포함하고 싶습니다. 예를 들면 다음과 같습니다.
<object data="logo.svgz" width="100" height="100" x="200" y="400"/>( "object"는 예일뿐입니다. 외부 문서는 xhtml이 아닌 SVG입니다).
어떤 아이디어? 이것이 가능할까요? 아니면 내 외부 SVG 문서에 logo.svg xml을 간단히 넣는 것이 가장 좋은 방법입니까?
답변:
image요소를 사용하고 SVG 파일을 참조하십시오. 재미를 위해 다음을 다음과 같이 저장하십시오 recursion.svg.
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="-50" cy="-50" r="30" style="fill:red" />
<image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg><image>SVG에서 (나 <img>또는 <embed>당신이 기본 DOM에 대한 액세스 권한이 부여되지 않은 SVG 파일을 참조하는 HTML에서). 따라서에서 참조한 SVG 요소 내부의 요소는 스타일을 지정할 수 없습니다 <image>.
<image xlink:href="data:image/svg+xml;utf8,<svg …>… </svg>" />. (JavaScript를 사용하여 href속성 을 설정하는 경우 <등 문자 를 이스케이프 할 필요가 없습니다 .)
xlink:href더 이상 사용되지 않습니다 . 이제 href. 이를 포함하도록 답변을 업데이트 할 수 있습니까?
또는 실제로 다음과 같이 부모 svg에 자식 svg를 포함 할 수 있습니다.
<svg>
<g>
<svg>
...
</svg>
</g>
</svg>데모 :
http://hitokun-s.github.io/old/demo/path-between-two-svg.html
다음을 사용하여 SVG를 다른 SVG에 포함 할 때 언급 할 가치가 있습니다.
<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />그런 다음 포함 된 SVG는 지정된 크기 의 직사각형 모양을 취 합니다.
즉, 임베디드 SVG가 원이거나 정사각형이 아닌 다른 모양이면 투명도가있는 정사각형이됩니다. 따라서 마우스 이벤트는 포함 된 사각형에 트랩되어 상위 SVG에 도달하지 않습니다. 조심하세요.
더 나은 방법은 패턴을 사용하는 것입니다. 모양을 채우려면 원, 정사각형 또는 경로를 선택합니다.
<defs>
<pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
</pattern>
</defs>그런 다음 다음과 같은 패턴을 사용하십시오.
<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>이제 마우스 이벤트가 투명한 이미지 사각형에 갇히지 않습니다!
<image>태그 를 사용 하면 포함 된 파일의 렌더링 품질이 낮다는 것을 알았습니다 . 그러나 다음 기술이 효과가있었습니다 (SVG 파일 내부에 SVG 파일을 포함하기 위해-반드시 HTML 페이지에서 렌더링 할 필요는 없음).
텍스트 편집기에서 SVG 파일을 편집합니다.
메타 데이터의 끝을 찾으십시오.
</metadata>
<g
id="layer1"
inkscape:groupmode="layer"
inkscape:label="Layer 1">해당 그룹 태그 뒤에 다음 행을 삽입하십시오.
<use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />이 경우 OTHERFILE.svg를 파일에 포함하고 모든 layer1 (첫 번째 및 기본 레이어)을 포함합니다.
이것을 저장하고 Inkscape에서 파일을 엽니 다.
이 기술은 모든 페이지에 표준 배경 또는 로고를 포함하는 데 유용합니다. 파일에 먼저 넣으면 먼저 렌더링되므로 맨 아래에 렌더링됩니다. 다음 속성을 추가하여 잠글 수도 있습니다.
sodipodi:insensitive="true" 다시 말해:
<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />참고 xlink:href는 더 이상 사용되지 않습니다 . href대신 사용하십시오.
<svg viewBox="0 0 512 512">
<image width="512" height="512" href="external.svg"/>
</svg>viewBox, width및 height값 (이 답변에서)은 단순히 설명을 목적으로 한 것이므로 그에 따라 레이아웃을 조정하십시오 ( 더 읽기 ).
<image> 와 비슷한 사양 을 공유 하므로 Christiaan의 답변<img> 에서 언급했듯이 SVG 스타일을 지원하지 않습니다 . 예를 들어, svg 모양 색상을 글꼴 색상과 동일하게 설정하는 다음 css 라인이있는 경우
svg {
fill: currentColor;
}위의 스타일 <image>이 사용 되면 적용되지 않습니다 . 이를 위해 Nick의 답변에<use> 표시된 것처럼 을 사용해야합니다 . 합니다.
그의 대답의 메모 id="layer1"와 href="OTHERFILE.svg#layer1"값은 필수입니다. 입니다.
즉, id속성을 외부 svg 파일 에 추가 해야하므로 (수정 된) 외부 svg 파일을 직접 (웹 사이트) 또는 다른 곳에서 호스팅해야합니다. 결과 외부 svg 파일은 다음과 같습니다 id.
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="..."/>
</svg>id 의 가치 무엇이든 될 수 있습니다.이 예제에서는 "logo"를 사용합니다.
해당 svg를 포함하려면
<svg viewBox="0 0 512 512">
<use href="edited-external.svg#logo"/>
</svg>위의 svg를 html에서 인라인으로 사용하는 경우 xmlns 속성이 필요하지 않습니다 (적어도 svgo 에서 알고있는 것 ).
SVG에 SVG를 임베드하고 색상을 변경하고 변형을 적용해야했습니다.
Firefox만이 중첩 된 svg 요소에서 "transform"속성을 지원합니다. <이미지>의 색상 변경도 불가능합니다. 그래서 둘의 조합이 필요했습니다.
내가 한 일은 다음과 같았습니다.
<svg>
<image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>이것은 적어도 Firefox, Chrome 및 Inkscape에서 작동합니다.
이것은 이제 변형을 적용 할 수 있다는 점을 제외하면 부모 svg 응답의 자식 svg와 동일하게 작동합니다.