动态SVG图形中的恒定边框 [英] Constant border in a dynamic SVG graphic

问题描述

我想要一个矩形，该矩形占据SVG文件中的所有位置.它也应该有一个边框(3px笔触宽度).图形的大小应该易于更改(通过更改"svg"节点的属性"width"和"height").我想出了以下构造:

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:

我需要这样的东西:

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

Is it possible at all? As mentioned before it must work for any size of the graphic.

提前谢谢！

推荐答案

可惜，不，至少没有使用纯声明性SVG的情况.形状上的笔划画在定义该形状的几何线的两边(在您的情况下，每边有1.5).因此，它将被裁剪为填充整个视图框的形状.

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.

您在哪种情况下使用此功能?您应该能够编写脚本:获取视图的大小，在将x和y分别设置为stroke-width/2，width到width-笔画宽度以及height到height-笔画宽度的矩形上.如果在动态环境中，您将需要检测调整大小，但这通常是可能的.

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.

这篇关于动态SVG图形中的恒定边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！