SVG＆＃039;のストロークマイテルリミット属性のマスター

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

簡単な説明

stroke-miterlimit依赖于stroke-linejoin ：如果连接处使用round或bevel ，则无需声明stroke-miterlimit 。但如果使用miter ，即使删除它，默认值也可能足够。多くのグラフィックソフトウェアが不要な場合でもこのプロパティを追加することに注意する必要があります。

stroke-linejoin详解

stroke-linejoin属性定义了路径或基本形状的轮廓在拐角处的形状。它决定了两条线在交汇点处的拐角外观。このプロパティは5つの可能な値を受け入れますが、そのうちの2つはブラウザによって実装されておらず、削除するために可能な限り仕様によって識別されます。サポートされている3つの値は次のとおりです。

• 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に設定します。
• ASのエクスポートまたはエクスポートを保存する代わりに画面オプションとしてエクスポートします。または、ベクトルを直接コピーして貼り付けます。

Figma

Figmaでは、形状角のノードをクリックし、「ストローク」セクションの3つのポイントの下で、角が接続されている場所を見つけることができます。默认情况下，“斜接角度”选项出现，但仅当连接设置为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;のストロークマイテルリミット属性のマスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。