Question

我想创建一个加载外部SVG文件的SVG图形，将其作为符号存储到其defs部分，并在主要部分中使用此符号：

<svg width="1000" height="1000">
 <defs>
  <symbol id="sym1" width="50" height="50" viewBox="0 0 45 45">
   <svg width="45" height="45">
       <rect x="0" y="0" width="45" height="45" style="stroke:red;stroke-width:1;fill:none"/>
   </svg>
  </symbol>
 </defs>
 <rect x="100" y="100" width="50" height="50" style="stroke:black;stroke-width:1;fill:none"/>
 <use x="100" y="100" xlink:href="#sym1"></use>
</svg>

http://jsfiddle.net/tx0rpxdf/4/

一个框架条件是我无法更改内部SVG元素，因为它将从外部文件加载。

符号的大小应为50x50，因此我相应地定义了它的宽度和高度。我知道内部SVG元素的大小为45x45，因此我将其viewBox定义为“0 0 45 45”。

为了测试符号的用法，我创建了一个大小为50x50的黑色矩形，并将符号实例放在同一个位置。这些行应该匹配。

但他们在Debian Jessie上使用Chrome（Chromium）并不匹配。更糟糕的是，它在Firefox和Opera中产生了不同的结果。

这里有什么问题，如何在所有支持SVG的浏览器中生成正确的结果？

Answer 1

有几个问题：

宽度/高度为45且笔画宽度为1的<rect>不是45个用户单位宽，它是46个用户单位宽，因为笔划在内部以0.5为单位在外面戳出每个边缘0.5个单位。如果您无法更改内部<svg>元素，那么您将无法解决此问题。
一个在另一个上面绘制两个形状不会使一个隐藏另一个，因为有效的抗锯齿。 shape-rendering="optimizeSpeed" can prevent this。

使用定义的符号时缩放

1 个答案: