Question

我已经按照许多指南将外部SVG添加到页面中......就像这样：http://wearejh.com/design/inline-svg-use-element/

代码是这样的：

<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

我做错了什么？

Answer 1

根据SVG specification

与'image'不同，'use'元素不能引用整个文件。

您需要在网址中添加fragment identifier，以指明您要尝试展示的图片中的哪个项目。

Answer 2

为什么不在img标签中使用svg。因为你没有生成任何东西而是正在加载。

Check the example

Answer 3

您忘记在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>

如何正确<use> <svg>元素加载外部源？

3 个答案: