我正在尝试在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，则可以正确缩放。这是一个无效的小提琴-红色的大矩形实际上应该是这个圆圈。
https://jsfiddle.net/rg4kyuc7/1/
如何获取svg以缩放到指定的width和height？
编辑-在Chrome上运行，但在Firefox上运行？有什么想法吗？
<image>SVG 1.1和即将推出的SVG 2之间的行为有所变化。
Chrome似乎正在遵循SVG 2行为。与其他浏览器相比，Chrome在实现SVG 2方面似乎要走得更远。如果它仍仅支持SVG 1.1标准，则显示嵌入式图像的方式将是错误的。
Firefox（和IE，行为相同）对于SVG 1.1和SVG 2均不正确。SVG 1.1标准规定，当所引用的SVG文件<image>没有no时viewBox，应仅将其显示在由SVG 1.1定义的位置。x和y属性，以及width与height所述的<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>无论如何，有一个简单的解决方法。添加适当viewBox的circle.svg，它将在所有浏览器中呈现相同的效果，无论它们是否支持SVG 2。
<svg xmlns="http://www.w3.org/2000/svg" width="335" height="296" viewBox="0 0 335 296">
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句