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>