所以，SVG有这样的stroke-miterlimit 呈现属性。你可能在从图形编辑程序中导出SVG时看到过它，或者你发现你可以删除它而不注意到视觉外观的任何变化。
在进行了大量的研究之后，我首先发现，这个属性与stroke-linejoin ，我将向你展示如何以及我学到的关于这个有趣的（可能被忽略的）SVG属性的一堆其他东西。
简而言之
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 ，让我们回到手头的话题，从《Using SVG with CSS3 and HTML5》一书中挑选出stroke-miterlimit 的定义。
[......]在非常狭小的角落里，你必须在两个边缘相接之前将笔画延长相当长的距离。出于这个原因，有一个辅助属性：
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也会在你期望的4 ，或者根本就没有stroke-miterlimit 的地方添加stroke-miterlimit="10" 。
而且，即使我们选择一个不同的stroke-linejoin ，而不是 "Miter Join"，也是如此。下面是我在导出SVG时得到的代码：stroke-linejoin="round" 。
<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 一起工作的，以及为什么你在设置米特限制值的时候会得到一个斜面的连接。
