Question

我试图在svg中嵌入一个svg（真正的应用程序是能够在d3图表中嵌入一个图像）。这是一个简化版本：

<svg viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="0" r="80" style="fill:blue" />
  <image x="10" y="20" width="120" height="150" xlink:href="https://webkit.org/blog-files/circle.svg" />
</svg>

如果嵌入的图像是光栅图像（png / jpg），而不是svg，则可以正确缩放。这是一个不起作用的小提琴 - 大红色矩形实际应该是this circle。

https://jsfiddle.net/rg4kyuc7/1/

如何让svg扩展到指定的width和height？

编辑 - 在Chrome上工作但不在Firefox上工作？！有什么想法吗？

Answer 1

<image>的行为在SVG 1.1和即将发布的SVG 2之间略有改变。

看起来Chrome正在遵循SVG 2的行为。 Chrome在实施SVG 2方面似乎比其他浏览器更进一步。如果它仍然只支持SVG 1.1标准，它显示嵌入图像的方式将是错误的。

对于SVG 1.1 和 SVG 2，Firefox（以及行为相同的IE）都是不正确的.SVG 1.1标准说明{{1}引用的SVG文件时}没有<image>，它应该只显示在viewBox和x属性以及y和width定义的位置{1}}元素被忽略。换句话说就是这样：

＆＃13;

height

＆＃13;

无论如何，有一个简单的解决方法。添加适当的<image>到<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="0" cy="0" r="80" style="fill:blue" /> <image x="10" y="20" width="335" height="296" xlink:href="https://webkit.org/blog-files/circle.svg" /> </svg>，它将在所有浏览器中呈现相同的内容，无论它们是否支持SVG 2。

viewBox

Answer 2

我遇到了类似的问题，我们最终使用了SVG的标签。

这样你就可以在其中嵌入一个html img标签，并将其设置为这样。像这样：

<svg viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="0" r="80" style="fill:blue" />
  <foreignObject x="10" y="20" width="120" height="150"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <img src="https://webkit.org/blog-files/circle.svg" alt="Smiley face" height="150" width="120">
      </body>
  </foreignObject>
</svg>

以下是

的MDN文档

https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

嵌入式svg没有正确缩放

2 个答案: