马黑黑《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 的比例关系。<br />
<br />
而 SVG 子元素如果存在描边（stroke）属性，默认情况下，描边的厚度（stroke-width）也会自动跟随上述二者的比例缩放。某些场景下，可能不希望描边变细或变粗，这时候就得用上 vector-effect 属性，该属性可以翻译为“矢量效果”，其可选值中有一个 <font style="background-color:silver">non-scaling-stroke</font>，基于矢量图形的缩放效果，该值意为<font style="background-color:silver">不缩放描边厚度</font>。<br />
<br />
一楼示例，圆缺省默认缩放描边厚度，A指令绘制的路径、旋转的矩形则禁用缩放。预览效果时可以拖曳方框右下角水平改变方框的尺寸，方框内的 SVG 会跟随改变大小，SVG 内的 子元素尺寸会自适应场景产生缩放变化，变化过程中的观察对象为三个子元素的 stroke-width。</td></tr></table>
实用的教程，谢谢分享
页:
[1]