如何正確地加載外部來源的<use><svg>元素？

我已經按照許多導遊以增加外部SVGs到頁面......像這樣的：http://wearejh.com/design/inline-svg-use-element/如何正確地加載外部來源的<use><svg>元素？

的代碼是這樣的：

<svg> 
    <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg"></use> 
</svg>

它只是不加載，例如這裏：http://jsbin.com/cipacitovo/edit?html,output

我在做什麼錯？

來源

2016-06-26 raphadko

看一看http://jsfiddle.net/zSRW5/這可能會有所幫助 –

每SVG specification

不同於「圖像」，「使用」元件不能引用整個文件。

您需要在URL中添加fragment identifier以指示圖像中您試圖顯示哪個項目。

來源

2016-06-27 06:15:17

-1

您忘記了添加xmlns:xlink="http://www.w3.org/1999/xlink"在<svg>。

這是應該的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg"></use> 
</svg>

來源

2016-06-26 23:58:55 Getkey

沒什麼區別 – raphadko

你爲什麼不以IMG使用SVG你是不是產生什麼，而不是你加載tag.Because。

Check the example

來源

2016-06-27 00:14:53

使用SVG作爲圖像不會讓你訪問它裏面的元素，所以不會爲我工作。 – raphadko

嘗試以下任一方法https://www.sitepoint.com/add-svg-to-web-page/ –

如何正確地加載外部來源的<use><svg>元素？

回答

相關問題