xslt로 svg 스프라이트보기

Question

우리 팀 디자이너는 우리 애플리케이션에서 SVG "스프라이트"를 사용하고 있습니다. 내가 사용할 수있는 모든 이미지를 볼 수 있기를 원합니다. XML을 파싱하고 백 엔드에서 무언가를 만들려고했지만 XSLT에 대해 생각했습니다. SVG를 파싱하고 이미지 목록을 만드는 XSLT 파일을 갖고 싶습니다. 나는 그것을 얻는 것에 가깝다. .. 내가 가지고있는 것이 여기에있다. (나는 또한 게시물에 샘플 파일 시도하지만)

샘플 SVG :

<?xml-stylesheet type="text/xsl" href="/pages/sprites.xslt" ?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <symbol id="fitness" viewBox="0 0 64 64"> 
     <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(5 3)" stroke-linecap="square"> 
     <path d="M5.8,27.0664159 L5.8,10.6333223 C5.8,4.7607008 10.5607008,0 16.4333223,0 L16.4333445,0 C22.3059668,0 27.0666667,4.7607008 27.0666667,10.6333223 L27.0666667,47.3666778 C27.0666667,53.2393002 31.8273665,58 37.699989,58 L37.7000111,58 C43.5726335,58 48.3333333,53.2393002 48.3333333,47.3666777 L48.3333333,30.9333333"/> 
     <polygon points="11.6 50.267 11.6 47.367 9.667 44.467 9.667 32.867 11.6 29.967 11.6 27.067 0 27.067 0 29.967 1.933 32.867 1.933 44.467 0 47.367 0 50.267"/> 
     <polygon points="54.133 30.933 54.133 28.033 52.2 25.134 52.2 13.533 54.133 10.633 54.133 7.733 42.533 7.733 42.533 10.633 44.467 13.533 44.467 25.134 42.533 28.033 42.533 30.933"/> 
     </g> 
    </symbol> 
    </defs> 
</svg> 

과 XSLT 파일은 여기에서 찾을 : 그것은 주로 작동

How can I show all symbols in an SVG file?

... 그것은 생성 상자 밖에서 기대할 수있는 모든 dom 객체들. 이것은 꽤 놀랍습니다. 그러나 use 안에 내가 얻을 :

#shadow-root (closed) 

우리는 우리의 실제 응용 프로그램에서 볼 것입니다

...하지만 우리의 응용 프로그램에서이 이미지는 그림자 루트 안에 중첩된다. 그러나이 버전에서는 비어 있습니다. 기본적으로 앱 사이드에서 우리가하는 방식과 같습니다. 그게 무슨 문제 야?

Answer 1

파일에서 기호를로드하는 대신 출력 및 참조에 로컬로 기록하십시오.

또한 사용 된 요소의 크기를 정의해야합니다 (기본값은 100 %입니다). position()은 1부터 시작하므로 표시를 맨 왼쪽부터 시작하려면 1을 뺍니다.

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
       xmlns:svg="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <xsl:template match="/"> 
    <svg> 
     <xsl:copy> 
     <xsl:copy-of select="//svg:defs"/> 
     </xsl:copy> 
     <g stroke="black" fill="black"> 
     <xsl:for-each select="//svg:symbol"> 
      <use width="32" height="32"> 
      <xsl:attribute name="x"><xsl:value-of select="(position()-1) mod 10 * 32"/></xsl:attribute> 
      <xsl:attribute name="y"><xsl:value-of select="floor((position()-1) div 10) * 32"/></xsl:attribute> 
      <xsl:attribute name="xlink:href">#<xsl:value-of select="@id"/></xsl:attribute> 
      </use> 
     </xsl:for-each> 
     </g> 
    </svg> 
    </xsl:template> 
</xsl:stylesheet>