如何像Canvas那样实现SVG坐标系缩放渲染效果

行为差异背景 #

Canvas的渲染逻辑是：标签原生width、height属性定义内部绘制用的逻辑坐标系尺寸，CSS设置的width、height定义画布最终在页面上的渲染尺寸，浏览器会自动将整个逻辑画布的内容拉伸映射到渲染区域内。比如示例中19201080逻辑尺寸的Canvas被CSS压缩为100px100px时，从(0,0)绘制到(1920,1080)的斜线会被拉伸为正方形内的45度对角线。

默认SVG不具备这个行为：仅设置SVG标签的width、height属性再通过CSS修改渲染尺寸时，浏览器会直接裁切超出渲染区域的内容，不会做缩放映射，因为缺少逻辑坐标系到渲染区域的映射规则定义。

核心实现方法 #

给SVG标签添加viewBox属性即可实现和Canvas完全一致的缩放效果，属性语法为：

viewBox="<逻辑区域左上角x坐标> <逻辑区域左上角y坐标> <逻辑区域总宽度> <逻辑区域总高度>"

针对给出的测试用例，只需要在SVG标签上添加和原生宽高匹配的viewBox属性即可：

<svg id="svg" width="1920" height="1080" viewBox="0 0 1920 1080">
  <line x1="0" y1="0" x2="1920" y2="1080" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>

配套CSS不需要修改，依然设置100px*100px的渲染尺寸即可：

#svg {
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

缩放行为控制 #

你可以通过preserveAspectRatio属性自定义缩放规则，常用取值如下：

• none：强制拉伸整个逻辑区域填满渲染框，不保留原始宽高比，和Canvas的默认缩放行为完全一致，上述示例添加这个值后，红色斜线就会和Canvas示例一样显示为45度对角线

  <svg id="svg" width="1920" height="1080" viewBox="0 0 1920 1080" preserveAspectRatio="none">
  

• xMidYMid meet：默认值，等比缩放逻辑区域，保证内容完整显示在渲染框内，居中对齐，两侧可能留空白
• xMidYMid slice：等比缩放逻辑区域，保证填满整个渲染框，居中对齐，超出部分会被裁切

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