符号设置固定尺寸和相对位置时如何实现SVG整体自适应缩放

问题根因 #

• <symbol>上定义的固定width、height属性优先级高于外层缩放规则，会强制符号渲染为固定尺寸
• 外层SVG未设置viewBox属性，无法建立整体坐标和视口的映射关系，无法实现全局等比缩放
• 内部<use>标签的定位、尺寸参数是固定像素值，没有全局坐标系做映射时无法同步缩放

修改步骤 #

1. 移除所有<symbol>标签上的固定width、height属性，保留原有viewBox即可，viewBox已经可以保证单个符号自身的比例不会变形，不需要靠固定宽高维持
2. 计算所有符号排列后的整体画布范围，给外层SVG添加对应的viewBox属性，同时添加preserveAspectRatio="xMidYMid meet"保证缩放时内容不变形、居中适配
3. 把原来写在symbol上的宽高参数移到对应的<use>标签上，确保符号渲染尺寸符合你的预期

修正后示例代码 #

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" viewBox="0 0 150 50" preserveAspectRatio="xMidYMid meet">
      <symbol id="svg23" viewBox="0 0 20 20">
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30">
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" width="50" height="50" />
      <use href="#svg20" x="100" y="0" width="50" height="50" />
</svg>

说明 #

如果实际场景中符号布局更复杂，只需要重新计算所有元素覆盖的最大宽高，替换外层viewBox的后两个参数即可，内部所有坐标、尺寸都会跟随外层SVG的宽高等比缩放，和普通图片缩放效果完全一致，符号的相对位置、自身比例都不会发生变化。

内容的提问来源于stack exchange，提问作者djalonso