Attribut de maîtrise de la maîtrise du SVG-tutoriel CSS-php.cn

Attribut de maîtrise de la maîtrise du SVG

Lisa Kudrow

Libérer： 2025-03-13 11:48:10

original

492 Les gens l'ont consulté

Mastering SVG's stroke-miterlimit Attribute

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 。

autrement dit:

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

Copier après la connexion

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

设计应用中的`miter`限制设置

许多设计应用程序都提供了设置miter连接和限制的方法。 Voici quelques exemples:

Adobe Illustrator

Illustrator允许在配置路径的笔划时修改miter值。可以在路径的“笔划”设置中找到它。需要注意的是，只有当路径的“拐角”设置为“斜接连接”时，才能设置“限制”值。

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

将“限制”值设置为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。