带有半径，虚线数组和虚线偏移量的svg矩形

Question

我正在尝试通过使用半径（rx，ry）在svg中创建一个在顶部和底部具有边框/笔触和圆角的矩形。通过使用css属性“ dasharray：width，height”，可以仅使用边框/笔触对顶部和底部进行样式设置。没有半径，则按预期工作。

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

我们非常感谢您提供有关如何创建一个半径仅为顶部和底部边框的矩形的帮助，以及对正在发生的情况的一些了解。

看到小提琴：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规范定义了所有形状的破折号图案应从何处开始。包括矩形。

对于矩形，起点在矩形顶部水平部分的左端。因此，如果有一个圆角，那就是曲线与直线相交的点。然后，虚线图案围绕矩形沿顺时针方向前进。

该起点实际上是隧道或门户，虚线图案通过该隧道或门户出现并消失。您无法更改其位置，只需要牢记起点就可以精心构建虚线图案。

您没有说出要在顶部笔划中确切包含多少个圆角，但我将假设您要包含整个曲线。

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

为了正确计算破折号，我们需要精确计算出所有边和圆角的长度。

顶部和底部分别是长度(w - 2 * r) = 110。让我们称之为xlen。

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

每个圆角将是长度(PI * 2 * r) / 4 = 31.416。叫这个rlen

破折号版本1

我们可以根据完成矩形的周长所需的不同图案长度来制作破折号图案。就是

• 顶部的矩形（不包括左上角）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>

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

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