动态SVG图形中的恒定边框

Question

我希望有一个矩形可以占据SVG文件中的所有位置。它还应该有一个边框（3px笔画宽度）。图形的大小应该易于更改（通过更改“svg”节点的属性“width”和“height”）。我想出了以下结构：

<svg width="150" height="35" >
  <g>
    <rect
      id="rect6648"
      style="fill:#ffffff; fill-opacity:1; stroke:#000000; stroke-width:3;"
      x="0"
      y="0" 
      width="100%"
      height="100%" />
  </g>   
</svg>

但是它产生了带有脏边框的以下图像：

我需要这样的东西：

有可能吗？如前所述，它必须适用于任何大小的图形。

提前致谢！

Answer 1

唉，不，至少不是纯粹的声明性SVG。形状上的笔划绘制在定义该形状的几何线的两侧（在您的情况下，两侧各有1.5）。因此，它将被剪裁为填充整个视图框的形状。

你在哪种情况下使用它？您应该能够编写脚本：获取viewbow的大小，在rect set x和y到stroke-width / 2，width to width - stroke-width和height到height - stroke-width。如果在动态上下文中，您将需要检测调整大小，但这通常是可能的。

Answer 2

您需要将ractangle放置在像x="0.5" y="0.5"这样的半像素坐标处，然后边框不会模糊。同时将vector-effect:non-scaling-stroke添加到矩形的CSS中，以确保无论缩放级别如何，边框始终为3px宽。