所以，SVG 有这个 stroke-miterlimit 展示属性。 您可能在从图形编辑器程序导出 SVG 时看到过它，或者您可能发现您可以删除它而不会注意到视觉外观有任何变化。
经过大量的研究，我发现的第一件事是该属性与 stroke-linejoin 一起工作，我将向您展示如何以及我了解到的关于这个有趣（可能被忽视）的 SVG 属性的其他一些事情。
TLDR;
stroke-miterlimit 依赖于 stroke-linejoin：如果我们对接缝使用 round 或 bevel，那么就没有必要声明 stroke-miterlimit。 但是，如果我们改为使用 miter，我们仍然可以删除它，并且默认值可能就足够了。 注意，许多图形软件编辑器会在不需要时添加此属性。
stroke-linejoin 是什么？
我知道，我们实际上是在这里讨论 stroke-miterlimit，但我希望从 stroke-linejoin 开始，因为它们紧密地协同工作。 这是从 SVG 工作组 (SVGWG) 直接提取的 stroke-linejoin 的定义
stroke-linejoin指定在路径或基本形状被描边时用于路径或基本形状角点的形状。
这意味着**我们可以定义两条线在一点相遇时角点的形状**。 此属性接受五个可能的取值，但其中两个没有浏览器实现，并且由规范标识为有被删除的风险。 因此，我将简要介绍属性接受的三个支持的值。
miter 是默认值，它恰好是我们要看的三个中最重要的一个。 如果我们没有在 SVG 代码中明确声明 stroke-linejoin，那么 miter 用于对路径的角点进行造型。 当两个边都以锐角相遇时，我们知道接缝设置为 miter。
但是，我们也可以选择 round，它会用 - 你猜对了 - 圆角来柔化边缘。
另一方面，bevel 值会产生一个平坦的边缘，看起来有点像一个裁剪的角点。
stroke-miterlimit 是什么？
好的，现在我们知道了 stroke-linejoin 是什么，让我们回到正题，从书中拆解 stroke-miterlimit 的定义使用 SVG 与 CSS3 和 HTML5
[...] 在非常紧密的角点上，您必须将描边延长相当长的距离，然后两条边才能相遇。 出于这个原因，有一个辅助属性：
stroke-miterlimit。 它定义了在创建斜接角时可以扩展点的距离。
换句话说，stroke-miterlimit 设置边缘的描边在它们能够在一点相遇之前延伸的距离。 并且仅当 stroke-linejoin 为 miter 时。
因此，stroke-miterlimit 值可以是任何正整数，其中 4 是默认值。 值越高，角点形状允许延伸的距离越远。
它们如何协同工作
您现在可能对 stroke-linejoin 和 stroke-miterlimit 如何协同工作有了很好的概念理解。 但是，根据 stroke-miterlimit 值，您可能会得到一些看似古怪的结果。
例如：如果 stroke-linejoin 设置为 miter，当斜接限制过低时，它实际上可能最终看起来像 bevel 值。 以下是规范 来帮助我们理解为什么
如果斜接长度除以描边宽度超过
stroke-miterlimit，那么 [miter值] 将转换为斜角。
因此，从数学上讲，我们可以说
[miter length] / [stroke width] > [stroke-miterlimit] = miter
[miter length] / [stroke width] < [stroke-miterlimit] = bevel这有道理，对吧？ 如果斜接无法超过描边宽度，那么它应该是一个平坦的边缘。 否则，斜接可以增长并形成一个点。
有时眼见为实，所以这里有 Ana Tudor 的一个精彩演示，展示了 stroke-miterlimit 值如何影响 SVG 的 stroke-linejoin
在设计应用程序中设置斜接限制
您是否知道许多我们在日常工作中使用的设计应用程序都提供斜接连接和限制？ 以下是您在 Illustrator、Figma 和 Inkscape 中找到它们的位置。
在 Adobe Illustrator 中设置斜接限制
Illustrator 有一种方法可以在配置路径的描边时修改斜接值。 您可以在路径上的“描边”设置中找到它。 请注意，正如规范一样，我们只能在路径的“角点”设置为“斜接连接”时才能为“限制”设置值。
一个细微差别是，Illustrator 的默认斜接限制为 10 而不是默认的 4。 我每次导出 SVG 文件或复制粘贴生成的 SVG 代码时都注意到这一点。 当您打开代码时，这可能会令人困惑，因为即使您没有更改斜接限制值，Illustrator 也会添加 stroke-miterlimit="10"，而您可能希望的是 4 或者根本没有 stroke-miterlimit。
即使我们选择除“斜接连接”之外的其他 stroke-linejoin 值，情况也是如此。 以下是使用 stroke-linejoin="round" 导出 SVG 时得到的代码。
<svg viewBox="0 0 16 10"><path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M0 1h15.8S4.8 5.5 2 9.5" fill="none" stroke="#000"/></svg>stroke-miterlimit 不应该在那里，因为它只适用于 stroke-linejoin="miter"。 以下是一些解决方法
- 将“限制”值设置为 4，因为它是 SVG 中的默认值，也是唯一不会出现在代码中的值。
- 使用“导出为”或“导出为屏幕”选项，而不是“另存为”或直接复制粘贴矢量。
如果您想看到它被修复，请加入我并 为实现它而投票。
在 Figma 中设置斜接限制
斜接连接和限制在 Figma 中略有不同。 当我们点击形状上角点的节点时，在描边部分的三点下，我们可以找到一个地方来设置角点的连接。 选项“斜接角”默认情况下会出现，但仅当连接设置为斜接时才会出现
这部分工作与 Illustrator 类似，除了 Figma 允许我们以度为单位设置斜接角，而不是以小数形式设置。 还有一些其他具体的细微差别需要指出
- 默认情况下，角度为 7.17°，并且无法设置更低的值。 导出 SVG 时，该值在标记中变为
stroke-miterlimit='16'，这与 SVG 规范和 Illustrator 默认值都不同。 - 最大值为 180°，在使用此选项进行绘图时，连接将自动切换为斜角。
- 使用斜角连接导出时，
stroke-miterlimit存在于代码中，但它会保留上次斜接角处于活动状态时设置的值（Illustrator 也会这样做）。 - 使用圆角连接导出 SVG 时，路径会扩展，我们不再有描边，而是带有填充颜色的路径。
我无法找到一种方法来避免在stroke-miterlimit不需要时出现在导出 SVG 中的额外代码。
在 Inkscape 中设置斜接限制
Inkscape 的工作方式完全符合我对设计应用程序管理斜接连接和限制的预期。当选择斜接连接时，默认值为4，这与规范中的值完全一致。更棒的是，当使用默认值时，stroke-miterlimit会从导出的 SVG 代码中排除！
不过，如果我们在修改限制后导出任何带有斜角或圆角的路径，stroke-miterlimit会重新出现在代码中，除非我们在“限制”框中保留默认的 4 个单位。与 Illustrator 的技巧相同。
如果我们选择**另存为 → 优化 SVG**选项，这些示例将正常工作。Inkscape 是免费的开源软件，在代码方面，它在stroke-miterlimit和许多优化导出代码的选项方面拥有最简洁的代码。
但是，如果您更熟悉 Illustrator（就像我一样），请记住以下解决方法。由于度数单位和笔划的扩展，Figma 感觉更远离规范和预期行为。
总结
这就是我关于 SVG 的stroke-miterlimit属性的了解。这是我们可能会忽略的另一个容易被忽视的东西，尤其是在优化 SVG 文件时。因此，现在当您设置stroke-miterlimit时，您将了解它的作用、它与stroke-linejoin一起工作的方式，以及为什么设置斜接限制值时您可能会得到斜角连接。