SVG内部图像自适应宽高的实现

马黑黑 · 发表于 2026-6-12 21:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

通常，SVG可视子元素使用像素为单位定义自己的尺寸或路径相关数据，不支持百分比或相对单位的表达方法。为此，在SVG中所绘制的图案，最终尺寸是固定的。实践中，在 SVG 标签宽高可变的情况下，如果希望其内部可视子元素宽高尺寸能跟随SVG宽高的变化而变化，最简单的实现方法是给 SVG 标签加上 viewBox 属性，这样，子元素图像仅参照 viewBox 属性值所规范的范围绘制图形，而 viewBox 属性则能顺应 SVG 的尺寸。试看以下示例：SVG 通过 CSS 设置会跟随浏览器窗口的变化而变化（使用了相对尺寸单位），其内的 circle（圆）以 SVG 的 viewBox 为绘制参照，因此它的尺寸也会因为浏览器窗口的尺寸变化而变化，预览效果时可手动改变浏览器窗口的尺寸查看变化效果——

<style>
    svg {
        display: block;
        margin: 20px auto;
        width: 30vw;
        height: 30vw;
        border: 1px solid gray;
    }
</style>

<svg viewBox="0 0 400 400">
    <circle cx="200" cy="200" r="190" fill="pink">
</svg>

核心原理是利用了 viewBox 属性，该属性用以定义绘图区域，其值的后两位数是绘图区域的宽与高，viewBox 属性按这个宽高比例去适配 SVG 的尺寸（因此要求 SVG 的宽高设置最好符合这个宽高比）。

并非 SVG 标签自身才拥有 viewBox 属性，SVG内部，不可视子元素 symbol 也能设置此属性。symbol 标签如果设置了 viewBox 属性，则其内的图案均以之为绘图参照，然后通过 use 标签实例化得以渲染，实例化图案设置 width 和 height 属性的有效性依据于 symbol 的 viewBox 是否存在，换言之，symbol 如果设置了 viewBox 则 use 就可以设置宽高（基于 SVG 的尺寸或 SVG viewBox——如有），use 缺省宽高的话就是 use 所在 SVG 或其 ViewBox 的宽高尺寸。

通过 symbol + use 方式同样可以可以灵活方便地设计和绘制图案。下例的 symbol 设置有 viewBox、内部绘制一个 polyline 图案，图案在实例化时设置了描边等属性，还加入了 stroke-dashoffset 动画。同样地，图案也可以跟随浏览器窗口的尺寸变化而动态变化——

<style>
    svg {
        display: block;
        margin: auto;
        width: 80vw;
        height: 45vw;
        border: 1px dashed gray;
        use {
            fill: none;
            stroke: rgba(128, 0, 0, .25);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 4 2;
            stroke-dashoffset: 0;
        	animation: move 4s linear infinite;
        	&:nth-of-type(2) { stroke: rgba(128, 0, 0, .55); }
        	&:nth-of-type(3) { stroke: rgba(128, 0, 0, .75); }
        }
    }
    @keyframes move {
        to { stroke-dashoffset: -90; }
    }
</style>

<svg>
	<symbol id="sb" viewBox="0 0 160 90">
	    <polyline points="2 2,30 88,150 10" />
	</symbol>
	<use href="#sb" x="0" y="0"></use>
	<use href="#sb" x="50" y="0"></use>
	<use href="#sb" x="100" y="0"></use>
</svg>

小结：实现SVG图案自适应窗口尺寸，核心原理是，其一， viewBox 属性，既可用于 SVG 自身也可以用于 symbol 子元素；其二，SVG 自身宽高应是可变的，可以考虑使用百分比或相对单位。