html - 从 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>

它不会出现在我的页面上，我只会得到一个空的白色方 block !无论如何我可以在 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> )

示例 fiddle :https://jsfiddle.net/7334vrmq/

希望这对您有所帮助。