在URL中使用HTML中的.svg文件？

Question

我正在尝试从HTML的外部来源使用svg。假设我有这个svg：https： //upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg

我发现了许多方法可以做到这一点，包括：

<img src="your.svg"/> 
<object data="your.svg"/> 
<iframe src="your.svg"/> 
<embed src="your.svg"/> 
<div style="background:url(your.svg)">...</div>

但不幸的是，我必须使用的样式适用于svg标签。如果我以这个为例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>    
</svg>

它不会显示在我的页面上，我只会看到一个空白的正方形！无论如何，我可以在svg标签中执行此操作吗？谢谢！

Answer 1

您必须指定svg的宽度和高度才能正确显示：

<svg width="90" height="90">       
     <image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>    
</svg>

更新资料

当然，您也可以通过CSS来做到这一点，但是<image>如果您不直接指定html属性，则必须确保在CSS中设置了标签的宽度和高度：

 svg {
      width: 150px;
      height: 150px;
 }

 image {
      width: 100px;
      height: 100px;
 }

这会将实际图像（svg）的大小设置为100px * 100px，但“包装”为150px。关于您对原始问题的评论，也许这就是为什么您看不到图片的原因，因为您没有设置宽度/高度，仅设置了适用于包装元素的样式（<svg>）

小提琴示例：https : //jsfiddle.net/7334vrmq/

希望这可以帮助。