SVG vector-effect 属性之禁用描边缩放

马黑黑

<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>

马黑黑

当我们在 viewBox 中绘制图形，图形的大小缩放看 svg 的宽高，具体依据的是 SVG 根元素的 width、height 和 viewBox 设定的 width、height 的比例关系。

而 SVG 子元素如果存在描边（stroke）属性，默认情况下，描边的厚度（stroke-width）也会自动跟随上述二者的比例缩放。某些场景下，可能不希望描边变细或变粗，这时候就得用上 vector-effect 属性，该属性可以翻译为“矢量效果”，其可选值中有一个 non-scaling-stroke，基于矢量图形的缩放效果，该值意为不缩放描边厚度。

一楼示例，圆缺省默认缩放描边厚度，A指令绘制的路径、旋转的矩形则禁用缩放。预览效果时可以拖曳方框右下角水平改变方框的尺寸，方框内的 SVG 会跟随改变大小，SVG 内的 子元素尺寸会自适应场景产生缩放变化，变化过程中的观察对象时三个子元素的 stroke-width。