请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
×
通常，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 自身宽高应是可变的，可以考虑使用百分比或相对单位。
|
关注公众号
发表于 2026-6-12 21:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2026-6-12 22:25
