HTML中SVG常规缩放方法失效 如何正确调整SVG logo尺寸

你之前缩放失效、删除rect属性后内容消失，核心是混淆了SVG根元素渲染尺寸和viewBox坐标映射的作用，且误删了必要的背景层属性，不需要修改任何内部图形元素的原有属性。

1. SVG任意缩放的正确实现方案 #

不要修改内部<rect>、<g>等元素的尺寸、变换属性，你删除rect的宽高后，矩形默认宽高为0，自然会出现空白。正确操作只需要修改根<svg>标签的3处属性即可：

• 删除原有写死的固定像素值height属性
• 将原有固定像素值的width属性改为你需要的尺寸：要固定显示尺寸就写对应像素值（比如width="300"即显示为300px宽），要自适应父容器宽度就写width="100%"
• 新增preserveAspectRatio="xMidYMid meet"属性，保证图形始终等比缩放、居中显示，不会被拉伸裁切

修改完成的可正常缩放的SVG示例代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="100%"
  viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096"
  preserveAspectRatio="xMidYMid meet">
   <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
   <g transform="scale(8.571428571428571) translate(10, 10)">
      <defs id="SvgjsDefs2369" />
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
   </g>
</svg>

*补充：你之前修改viewBox没看到效果，是因为根svg的width/height还保留着三千多像素的固定值，浏览器始终按这个固定尺寸渲染占位，viewBox只负责内部坐标到渲染区域的映射，本身不决定页面上的显示大小。

2. 调整viewBox是否需要保留原有宽高比例 #

分场景判断：

• 常规logo使用场景下，如果你不希望图形被拉伸变形，要么保留viewBox原有宽高比，要么依靠preserveAspectRatio属性让浏览器自动适配等比缩放，不要随意修改viewBox后两个参数（即viewBox定义的内部区域宽高）的比例。你当前文件的viewBox是导出时自动计算的、刚好完整包裹所有图形内容的数值，非必要不要修改，乱改反而会出现内容裁切、多余白边问题。
• 如果你刻意需要拉伸、压扁的特殊视觉效果，可以任意调整viewBox比例，不需要保留原比例，只是图形会出现变形。

3. viewBox的y轴位置是否需要改为正值 #

不需要。
viewBox的四个参数格式为min-x min-y width height，定义的是SVG可视区域对应的内部坐标范围，min-y为负值仅代表图形内容有部分处于y=0坐标线上方，这个数值是正还是负完全由内部图形的坐标位置决定，强行改成正值反而会导致内容偏移、被裁切。你当前文件里的-25.714...偏移值是导出时校准过的对齐参数，直接保留即可。

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