如何实现SVG图片的自定义横竖缩放比例？

我明白你遇到的问题——用<image>引用SVG时，不管怎么改width和height，它都死咬着原比例不放，试了viewbox也没达到预期效果。其实核心问题是SVG的preserveAspectRatio属性在搞鬼，默认它会强制保持原始宽高比，要实现自定义缩放，咱们可以从这几个方向入手：

方法1：修改<image>标签的preserveAspectRatio属性 #

这是最直接的方式，给<image>添加preserveAspectRatio="none"，就能强制SVG拉伸到你指定的宽高，完全忽略原比例。

修改后的HTML代码：

<svg width="1000" height="1000">
  <g class="flex">
    <image href="may.svg" width="100" height="700" preserveAspectRatio="none"></image>
  </g>
</svg>

方法2：修改SVG文件本身的preserveAspectRatio属性 #

如果你希望这个SVG在任何地方引用时都能自由缩放，直接修改may.svg的根<svg>标签，把preserveAspectRatio设为none：

修改后的may.svg开头部分：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="288.000000pt" height="143.000000pt" viewBox="0 0 288.000000 143.000000" preserveAspectRatio="none">

之后你再用<image>引用时，设置任意width和height都会按自定义比例缩放。

方法3：用<use>标签代替<image>（适合复用SVG元素） #

如果你的SVG内部有独立的可复用元素，可以给内部的<g>添加id，然后用<use>标签引用，同样配合preserveAspectRatio实现自定义缩放：

首先修改may.svg里的<g>标签：

<g id="may-graphic" transform="translate(0.000000,143.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">

然后在HTML里引用：

<svg width="1000" height="1000">
  <g class="flex">
    <use href="may.svg#may-graphic" width="100" height="700" preserveAspectRatio="none"></use>
  </g>
</svg>

补充说明：为什么之前的viewbox没生效？ #

你在外部<svg>设置viewbox，但<image>本身默认的preserveAspectRatio="xMidYMid meet"还是会强制保持SVG的原比例，所以必须针对<image>或者SVG文件本身修改这个属性，才能打破比例限制。

内容的提问来源于stack exchange，提问作者Mr.Potato