0
我們團隊的設計師讓我們在我們的應用程序中使用SVG「精靈」。我希望能夠看到所有可用的圖像。我打算解析XML並在後端構建一些東西,但後來我想到了XSLT。我想要一個XSLT文件來解析SVG並創建一個圖像列表。我正在接近它......這就是我所擁有的。使用xslt查看svg精靈
樣品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?
它主要作品...它創建所有我期待的箱子物體,這真是太神奇了。但裏面use
我得到:
#shadow-root (closed)
這就是我們在實際應用中看到...但在我們的應用程序,圖像被嵌套在陰影裏面根。但在這個版本中,它是空的。似乎基本上和我們在應用程序端做的一樣。有什麼問題?
如果你所有的圖標都像所示的,他們既沒有中風也沒有填充顏色。嘗試用''將'
的確如此,我正要添加一種風格來解決這個問題。 (我們使用CSS來改變精靈的顏色。)但是SVG沒有被放入陰影根中......所以我需要首先讓它工作。 :) – MustModify