[xml] SVG에 SVG를 포함 하시겠습니까?

Program / 글쓴이

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>

답변

또는 실제로 다음과 같이 부모 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와 동일하게 작동합니다.

답변