SVG에 SVG 내장?

SVG에 SVG 내장?

SVG 문서를 가지고 있는데 그 안에 외부 svg 이미지를 포함하고 싶습니다. 예를 들어 다음과 같습니다.

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

("object"는 예시일 뿐이며 외부 문서는 xhtml이 아닌 SVG가 됩니다).

무슨 생각 있어요?이게 가능하긴 해요?아니면 내 외부 SVG 문서에 단순히 logo.svg xml을 넣는 것이 최선입니까?

요소를 사용하고 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>태그는 내장된 파일의 저품질 렌더링을 제공했습니다.그러나 다음과 같은 기술이 적용되었습니다. (HTML 페이지에서 렌더링할 필요는 없지만 SVG 파일 안에 SVG 파일을 내장하는 것)

• 텍스트 편집기에서 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> 와 유사한 스펙을 공유합니다.<img>, Christian의 답변에서 언급된 것처럼 SVG 스타일링을 지원하지 않는다는 것을 의미합니다.예를 들어, svg 모양 색상을 폰트 색상과 동일하게 설정한 다음 css 라인이 있다면,

svg {
  fill: currentColor;
}

만일 위의 스타일은 적용되지 않습니다.<image>사용됩니다.그러시려면 다음을 사용하셔야 합니다.<use>, 닉의 대답처럼

참고 id="layer1"그리고.href="OTHERFILE.svg#layer1"그의 대답에서 가치는 의무입니다.

그 의미는 당신이 추가해야 한다는 것입니다.id외부 svg 파일에 속성을 부여하므로, (수정된) 외부 svg 파일을 직접(웹사이트) 또는 다른 곳에서 호스팅해야 합니다.된 외부 인부 svg과다가이목에에은가e에i(eee에tse인l다tsg ).id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

id의 값은 무엇이든 가능하며, 이 예제에서는 "로고"를 사용합니다.

그 svg를 내장하려면,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

html에서 위 svg를 인라인으로 사용하면 xmlns 속성이 필요 없습니다(적어도 svgo에서 알고 있는 것은 알 수 있습니다.

저는 SVG에 SVG를 내장하고 색상을 변경하고 변환을 적용해야 했습니다.

파이어폭스만 중첩된 svg 요소에서 "변환" 특성을 지원합니다.<이미지>의 색상 변경도 불가능합니다.그래서 둘의 조합이 필요했습니다.

제가 하게 된 것은 다음과 같습니다.

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

이것은 적어도 Firefox, Chrome 및 Inkscape에서 작동합니다.

이제 변환을 적용할 수 있다는 예외를 제외하고 부모 svg 응답의 자식 svg와 동일하게 동작합니다.

SVG 요 를 요 ?<use>추가 SVG를 내장하기 위한 태그?

아주 쉬운

<image x="120" y="720" width="1000" height="900" href="assets/img/image.svg" />

언급URL : https://stackoverflow.com/questions/5451135/embed-svg-in-svg