SVG vector-effect 属性之禁用描边缩放
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
.pa {
width: 400px;
min-width: 200px;
height: auto;
aspect-ratio: 2/1; /* 保持2:1宽高比 */
border: 1px solid gray;
overflow: hidden; /* 拖曳改变元素尺寸支持 */
resize: horizontal; /* 横向拖曳 */
margin: 30px auto 0;
}
</style>
<div class="pa">
<svg width="100%" height="100%" viewBox="0 0 100 50">
<!-- 路径 ：设置为描边不缩放 -->
<path
d="M 2 25 A1 0.4,0 0 0, 98 25"
fill="none"
stroke="red"
stroke-width="2"
vector-effect="non-scaling-stroke"
/>
<!-- 圆 ：不禁止描边缩放（缺省默认） -->
<circle
cx="10"
cy="10"
r="5"
fill="lightgreen"
stroke="orange"
stroke-width="1"
/>
<!--矩形 ：描边不缩放 -->
<rect
x="50"
y="25"
width="10"
height="10"
fill="tan"
stroke="red"
stroke-width="4"
vector-effect="non-scaling-stroke"
>
<animateTransform
attributeName="transform"
type="rotate"
from="0 55 30"
to="360 55 30"
dur="8s"
vector-effect="non-rotation"
repeatCount="indefinite"
/>
</rect>
</svg>
</div>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 当我们在 viewBox 中绘制图形，图形的大小缩放看 svg 的宽高，具体依据的是 SVG 根元素的 width、height 和 viewBox 设定的 width、height 的比例关系。
而 SVG 子元素如果存在描边（stroke）属性，默认情况下，描边的厚度（stroke-width）也会自动跟随上述二者的比例缩放。某些场景下，可能不希望描边变细或变粗，这时候就得用上 vector-effect 属性，该属性可以翻译为“矢量效果”，其可选值中有一个 non-scaling-stroke，基于矢量图形的缩放效果，该值意为不缩放描边厚度。
一楼示例，圆缺省默认缩放描边厚度，A指令绘制的路径、旋转的矩形则禁用缩放。预览效果时可以拖曳方框右下角水平改变方框的尺寸，方框内的 SVG 会跟随改变大小，SVG 内的 子元素尺寸会自适应场景产生缩放变化，变化过程中的观察对象为三个子元素的 stroke-width。 第一次知道这个新属性，谢谢马老师仔细讲解与演示{:4_190:} 谢谢黑黑老师详细讲解。学习了。{:4_187:} 仔细盯着图像的描边看了，貌似还是描边的厚度随着比例缩放更好，会感觉不到描边变化，否则感觉图形变小时，好像描边变厚了似的。
这样对比着看真好，感谢黑黑的讲解，学习了{:4_187:} 杨帆 发表于 2026-7-27 11:32
第一次知道这个新属性，谢谢马老师仔细讲解与演示
{:4_190:} 梦江南 发表于 2026-7-27 12:41
谢谢黑黑老师详细讲解。学习了。
{:4_190:} 红影 发表于 2026-7-27 17:41
仔细盯着图像的描边看了，貌似还是描边的厚度随着比例缩放更好，会感觉不到描边变化，否则感觉图形变小时， ...
这得看场景需求 马黑黑 发表于 2026-7-27 18:41
这得看场景需求
嗯嗯，也对，有什么需求就应该用对应的描边{:4_187:} 红影 发表于 2026-7-27 21:50
嗯嗯，也对，有什么需求就应该用对应的描边
不然 SVG 不会这么设计的 马黑黑 发表于 2026-7-27 21:51
不然 SVG 不会这么设计的
这个用图示的方式直接展示的好，让人得到更直观的感觉{:4_204:} 红影 发表于 2026-7-29 21:43
这个用图示的方式直接展示的好，让人得到更直观的感觉
不困惑就好 马黑黑 发表于 2026-7-30 21:37
不困惑就好
感谢黑黑的详细讲解{:4_187:} 红影 发表于 2026-7-30 22:49
感谢黑黑的详细讲解
甭客气 马黑黑 发表于 2026-7-31 08:00
甭客气
看看这样的帖子很有收获{:4_187:} 红影 发表于 2026-7-31 20:36
看看这样的帖子很有收获
有收获没收获也差不多，玩玩 马黑黑 发表于 2026-7-31 22:19
有收获没收获也差不多，玩玩
玩的时候也需要认真点才好{:4_204:} 红影 发表于 2026-8-1 08:43
玩的时候也需要认真点才好
做帖人怕就怕认真二字 马老师下午好！
我不用知其所以然，能用最关键，这个很漂亮，对我很有用。
感谢分享，一并抱走，很高兴有您的分享！祝好！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-1 14:10
马老师下午好！
我不用知其所以然，能用最关键，这个很漂亮，对我很有用。
{:4_190:}
页:
[1]
2