从URL使用HTML格式的.svg文件？

我试图在html中使用来自外部源的svg。假设我有一个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标签中是否有我可以做到这一点的方法？谢谢

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

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

这会将实际图像（svg）的大小设置为

100px*100px

，但“包装器”为

150px

。关于您对原始问题的评论，可能这就是您没有看到图像的原因，因为您没有设置宽度/高度，并且只设置了适用于包装元素的样式（

）

小提琴示例：

---

希望这能有所帮助。

为什么您的样式只适用于svg标记？不幸的是，我在多团队环境中工作。我必须使用提供的样式，否则我将不得不联系负责人并要求他们进行更改，这可能需要很长时间。具体样式直接应用于html元素的实际生产环境？有趣。你可以看看我的答案。也许会有帮助。嗨，Kryptik，谢谢你的回复。但是如果我直接指定它们的话，这不就是破坏了所提供样式的全部意义吗？所提供的样式是这样的：svg{width:20px；height:30px；display:block；position:absolute；left:0；top:20px；}但是这根本不会影响

，只有

svg

元素作为包装器。您仍然必须为

指定宽度。

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

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