svg sprite不顯示圖標，只顯示sprite.svg中的第一個圖標

Question

我正在使用svg sprite，並且無法顯示圖標。只有第一個圖標顯示從精靈其餘不是。有人可以幫忙嗎？

我做參考的HTML文件中的SVG圖標，並參考精靈表：

<i class="icon icon-desktop-wallet"> 
    <svg width="145" height="145" viewBox="0 0 53 32"> 
    <use xlink:href="sprite.svg#icon-image-desktop-wallet"></use> 
    </svg> 
</i> 

這裏是它plunker：https://plnkr.co/edit/9uJBGIsti0okemimjcNM?p=preview

不太知道我在這裏漏掉

謝謝

Answer 1

在sprite.svg文件中，每個元素的x改變了例如對圖標圖像-BG-雲中的x值是37.

<svg id="icon-image-bg-cloud" width="55" height="32" viewBox="0 0 55 32" x="37" y="0"> 
... 
</svg> 

這意味着當您使用視框=「0 0 29 32」你沒有看到任何作爲子畫面是外部可視顯示它區。

您可以通過任一

1. 設置視框=「37 0 29 32」對於該特定子畫面解決這個問題並然後適當地調節其他用途的值，或者
2. 設置X =「0」中的sprite.svg適合所有的精靈。事實上，你可以完全刪除x屬性，因爲這裏是0。

選項2對我來說似乎是最簡單的FWIW。