viewBox

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
---MDN

什么意思呢？举个例子。
有这样一个 svg 的文档

  <svg version="1.1" baseProfile="full" width="300" height="300"
    xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="250" y2="250" stroke="#e91e63f0" stroke-width="140" />
    <line x1="50" y1="250" x2="250" y2="50" stroke="#1430cebd" stroke-width="140" />
  </svg>

文档指定了宽高都是 300px, 里面的 line 都是根据 300 这个单位，来绘制的起点还有终点。现在如果宽高不再是固定的 300px 比如变成了相对的单位 vw， 那怎么在不改变 Line 内部的代码的情况下使得图像的大小伸缩呢？可以给 svg 添加 viewBox 属性，表示一个视口（不同于 viewPort）的大小

  <svg version="1.1" baseProfile="full" width="50vw" height="50vw" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="250" y2="250" stroke="#e91e63f0" stroke-width="140" />
    <line x1="50" y1="250" x2="250" y2="50" stroke="#1430cebd" stroke-width="140" />
  </svg>