动态 SVG 图形中的恒定边框
我想要一个矩形占据 SVG 文件中的所有位置。它还应该有一个边框（3px 描边宽度）。图形的大小应该易于更改（通过更改“svg”节点的属性“宽度”和“高度”）。我想出了以下构造：
<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>
但它会生成以下带有脏边框的图像：
我需要这样的东西：
这可能吗？如前所述，它必须适用于任何尺寸的图形。
提前致谢！
I want to have a rectangle that takes all the place in a SVG file. It should also have a border (3px stroke width). The size of the graphic should be easy changeable (by changing attributes "width" and "height" of the "svg" node). I came up with following construction:
<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>
But it produces following image with dirty border:
I need something like this:
Is it possible at all? As mentioned before it must work for any size of the graphic.
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
唉，不，至少对于纯声明性 SVG 来说不行。形状上的描边绘制在定义该形状的几何线的两侧（在您的情况下，两侧各有 1.5）。因此，它将被剪裁为填充整个视图框的形状。
您在什么情况下使用这个？您应该能够编写脚本：获取viewbow的大小，在矩形上将x和y设置为笔划宽度/2，宽度设置为宽度-笔划宽度，高度设置为高度-笔划宽度。如果在动态上下文中，您将需要检测调整大小，但这通常是可能的。
Alas, no, at least not with purely declarative SVG. The stroke on a shape is painted on both sides of the geometric line that defines that shape (in your case, there's 1.5 on either side). Because of that, it will get clipped for a shape that fills the whole viewbox.
In which context are you using this? You should be able to script it: get the size of the viewbow, on rect set x and y to stroke-width/2, width to width - stroke-width and height to height - stroke-width. If in a dynamic context you will need to detect resizes, but that's often possible.
您需要将矩形放置在半像素坐标处，例如
x="0.5" y="0.5"，这样边界就不会模糊。还要将vector-effect:non-scaling-lines添加到矩形的 CSS，以确保无论缩放级别如何，边框始终为 3px 宽。You need to place the ractangle at half pixel coordinates like
x="0.5" y="0.5", then the borders won't be blurry. Also addvector-effect:non-scaling-stroketo the rectangle's CSS to be sure that the border is always 3px wide regardless of zoom level.