带有半径、dasharray 和 dashoffset 的 svg 矩形

Question

我正在尝试使用半径(rx，ry)在 svg 中创建一个矩形，在顶部和底部带有边框/笔触，并带有圆角。
通过使用 css 属性“dasharray: width, height”，可以仅使用边框/笔触设置顶部和底部的样式。如果没有半径，这将按预期工作。

但是，添加半径后，顶部边框不再从矩形的左上角开始。
我试图通过使用 css 属性 dash-offset 来纠正这种行为，但这似乎使顶部边框部分消失(尽管它似乎适用于底部边框)。

非常感谢有关如何创建具有半径且只有顶部和底部边框的矩形的任何帮助，以及对正在发生的事情的一些了解。

见 fiddle :https://jsfiddle.net/Lus8ku7p/

<svg>
  <rect x =10 y=10 id=a ></rect>
  <rect x = 10 y=170 id=b class=round></rect>
  <rect x=170 y=10 id=c ></rect>
  <rect x=170 y=170 id=d class=round></rect>
</svg>
svg{
    width:400px;
    height:400px
}
rect {
   width: 150px;
   height: 150px;
   stroke-width:4px;
   stroke:black;
   fill:red;
   stroke-dasharray: 150 150;
}
.round{
   rx:20px;
   ry:20px;
 }
#c, #d{
   stroke-dashoffset: 40px;
 }

Answer 1

为了使虚线图案在所有 SVG 渲染器中呈现相同的效果，SVG 规范定义了所有形状的虚线图案应从何处开始。 Including rectangles .

对于矩形，起点位于矩形顶边水平部分的左端。所以如果有一个圆角，它是在曲线与直线相交的点上。然后虚线图案以顺时针方向围绕矩形进行。

这个起点实际上是一个隧道或门户，虚线图案通过它出现和消失。你不能改变它的位置，你只需要牢记这个起点，仔细构建你的破折号。

您没有说明您希望在顶部笔划中包含多少圆角，但我假设您希望包含整个曲线。

在您的示例中，矩形为 150x150，角半径为 20。让我们将它们称为 w、h 和 r。

为了正确计算虚线图案，我们需要准确计算出所有边和圆角的长度。

顶部和底部各为长度 (w - 2 * r) = 110 .让我们称之为 xlen .

左侧和右侧的长度为 (w - 2 * r) = 110 .让我们称之为 ylen .

每个圆角的长度为 (PI * 2 * r) / 4 = 31.416 .让我们称之为 rlen
破折号模式版本 1

我们可以根据完成矩形周长所需的不同长度的图案来制作虚线图案。 IE。

矩形的顶部(不包括左角):xlen + rlen = 141.416 .

图案右侧间隙:ylen = 110 .

底面(包括两个角:rlen + xlen + rlen = 172.832 .

图案左侧间隙:ylen = 110 .

左上角:rlen = 31.416 .

所以破折号图案是 "141.416 110 172.832 110 31.416" .

rect {
  stroke-width: 4px;
  stroke: black;
  fill:red;
  stroke-dasharray: 141.416 110 172.832 110 31.416;
}

<svg width="400" height="400">
  <rect x="10" y="10" width="150" height="150" rx="20"/>
</svg>

破折号模式版本 2

另一个更简单但不太明显的解决方案可能是利用虚线图案重复这一事实。将其与短划线偏移相结合，我们可以使短划线图案更简单。

矩形的顶部(包括两个角):rlen + xlen + rlen = 172.832 .

图案右侧间隙:ylen = 110 .

然后让它重复以形成底部和左侧。

所以破折号图案是 "172.832 110" .

“但是等等”你可能会说，这行不通，因为图案将顺时针移动一个圆角的长度。你是对的。

rect {
  stroke-width: 4px;
  stroke: black;
  fill:red;
  stroke-dasharray: 172.832 110;
}

<svg width="400" height="400">
  <rect x="10" y="10" width="150" height="150" rx="20"/>
</svg>

但是，如果我们使用 stroke-dashoffset向左/逆时针移动模式，我们将失去一些第一个破折号，但我们也会“拉”一些下一个重复的破折号图案通过开始/结束“门户”。这依赖于划线图案的正确长度。这就是为什么我们在开始时如此小心地准确计算所有长度。

Spo 我们需要为 stroke-dashoffset 使用的值是多少？ ?破折号偏移的工作方式是它指定我们应该从多远的模式开始绘制。所以它需要在圆角的长度之后，或者 31.416 .

所以如果我们加上，我们得到:

rect {
  stroke-width: 4px;
  stroke: black;
  fill:red;
  stroke-dasharray: 172.832 110;
  stroke-dashoffset: 31.416;
}

<svg width="400" height="400">
  <rect x="10" y="10" width="150" height="150" rx="20"/>
</svg>

您可以看到，如果您希望虚线图案在正确的位置开始和停止，这是可能的。您只需要准确计算破折号图案中的长度即可。

如果您需要在其他尺寸的矩形上使用相同类型的图案，则需要使用我在本答案开头列出的公式重新计算长度。