掌握SVG＆＃039; s Stroke-Miterlimit屬性

SVG的stroke-miterlimit属性，你可能在图形编辑器导出SVG时见过它，或者发现删除它后视觉效果没有任何变化。本文深入探讨了这个SVG属性，并揭示了它与stroke-linejoin属性的关联。

簡述

stroke-miterlimit依赖于stroke-linejoin ：如果连接处使用round或bevel ，则无需声明stroke-miterlimit 。但如果使用miter ，即使删除它，默认值也可能足够。需要注意的是，許多圖形軟件即使在不需要時也會添加此屬性。

stroke-linejoin详解

stroke-linejoin属性定义了路径或基本形状的轮廓在拐角处的形状。它决定了两条线在交汇点处的拐角外观。該屬性接受五個可能的值，但其中兩個沒有瀏覽器實現，並且被規範標識為可能被刪除。這裡主要介紹三個支持的值：

• miter (默认值):两条线以锐角相交。
• round :拐角处为圆角。
• bevel :拐角处为平角，类似于裁剪的角。

stroke-miterlimit详解

stroke-miterlimit属性定义了在创建miter拐角时，轮廓边缘延伸的距离。只有当stroke-linejoin设置为miter时，此属性才有效。

stroke-miterlimit值可以是任何正整数，默认值为4。值越大，拐角形狀允許延伸的距離越遠。

屬性協同作用

stroke-linejoin和stroke-miterlimit协同工作。当stroke-linejoin设置为miter ，且miter长度除以笔划宽度超过stroke-miterlimit时， miter将转换为bevel 。

換句話說：

 <code>[斜接长度] / [笔划宽度] > [stroke-miterlimit] = bevel [斜接长度] / [笔划宽度] </code>

如果miter无法超过笔划宽度，则它应该是一个平角；否则， miter可以增长并形成一个点。

设计应用中的miter限制设置

许多设计应用程序都提供了设置miter连接和限制的方法。以下是一些示例：

Adobe Illustrator

Illustrator允许在配置路径的笔划时修改miter值。可以在路徑的“筆劃”設置中找到它。需要注意的是，只有當路徑的“拐角”設置為“斜接連接”時，才能設置“限制”值。

Illustrator的默认miter限制为10，而不是规范中的4。导出SVG文件或直接复制粘贴SVG代码时，即使未更改miter限制值，Illustrator也会添加stroke-miterlimit="10" 。即使stroke-linejoin设置为round ，Illustrator也会添加此属性。解決方法：

• 將“限制”值設置為4。
• 使用“導出為”或“導出為屏幕”選項，而不是“另存為”或直接複製粘貼矢量。

Figma

Figma中，點擊形狀角度的節點，在“筆劃”部分的三個點下，可以找到設置拐角連接的地方。默认情况下，“斜接角度”选项出现，但仅当连接设置为miter时才出现。

Figma允许以度数单位而不是十进制值设置miter角度。一些需要注意的細微之處：

• 默認角度為7.17°，無法設置更低的值。导出SVG时，该值在标记中变为stroke-miterlimit='16' 。
• 最大值为180°，绘制时，连接会自动切换为bevel 。
• 使用bevel连接导出时， stroke-miterlimit保留上次miter角度激活时设置的值。
• 使用round连接导出时，路径会扩展，不再有笔划，而是一个填充颜色的路径。

Inkscape

Inkscape的工作方式與預期一致。选择miter连接时，默认值为4。当值为默认值时， stroke-miterlimit会被排除在导出的SVG代码之外。但是，如果在修改限制后导出任何具有bevel或round的路径， stroke-miterlimit将会回到代码中，除非将“限制”框中的值保持为默认值4。

總結

stroke-miterlimit属性容易被忽视，尤其是在优化SVG文件时。了解它的作用、与stroke-linejoin的协同工作方式以及设置miter限制值时可能出现bevel连接的原因，将有助于更好地使用此属性。

以上是掌握SVG＆＃039; s Stroke-Miterlimit屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！