svg的响应式

项目中遇到一个数据图，无法在echarts找到类似的设置，就研究svg写了一个。但是新需求需要对页面进行响应式处理，就上网找了下svg的响应式。 首先尝试对x，y等数值改写为百分数，一来麻烦，而来path写成百分数不生效。 然后看到了svg的viewBox属性，可以对svg进行缩放，并通过preserveAspectRatio属性来控制具体的实现方式。

#viewport

viewport就是指svg本身的大小，可以通过width属性和height属性来控制。这里我因为要用媒体查询，就通过css来写style了。

#viewbox

viewbox就是控制svg进行缩放。有四个参数，分别是x1，y1，x2，y2。就是左上角的x，y坐标和右下角的x，y坐标。开始我理解反了，以为要对viewbox做相应。viewbox本身不用写单位，默认px。查了下可以写em等单位，就用响应式写了svg的font-size进行控制，但是没有效果。后来发现是viewbox写死成原始大小，然后viewport来控制缩放。这样就简单了，viewbox写成原始大小，然后对svg的实际宽高通过css来控制。

#preserveAspectRatio

当viewbox和viewport的宽和高比例不一致的时候可以指定如何缩放。preserveAspectRatio必须与viewBox配合使用，单独使用无效。它有两个参数，第一个参数是必须的第二个是可选的。 第一个参数表示如何对齐，包括x和y。x可选xMin,xMid,xMax；y可选YMin，YMid，YMax。第二个参数写none会拉伸变形，而meet会保持比例缩放，以最小边对齐。 preserveAspectRatio不写的话，默认就是xMinYMin meet。

<svg viewBox="0 0 300 180" preserveAspectRatio="xMinYMin meet">
  <!-- 定义渐变 -->
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#FFF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#AE76F8;stop-opacity:1" />
    </radialGradient>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(83,75,129);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(45,45,70);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- 上方文字 -->
  <text x="10" y="10" fill="#A6A5A5" style="font-size: 10px;">1st</text>
  <text x="10" y="25" fill="#A6A5A5" style="font-size: 10px;">TEST</text>
  <text x="236" y="10" fill="#AE76F8" style="font-size: 10px;">LAST</text>
  <text x="236" y="25" fill="#AE76F8" style="font-size: 10px;">TEST</text>
  <!-- 矩形 -->
  <rect x="10" y="25" width="256" height="126"
  fill="url(#grad2)"/>
  <!-- 十字 -->
  <line x1="10" y1="93" x2="266" y2="93"
  style="stroke:rgb(82,80,113);stroke-width:1"/>
  <line x1="138" y1="30" x2="138" y2="156"
  style="stroke:rgb(82,80,113);stroke-width:1"/>
  <!-- 圆弧曲线 -->
  <path d="M 138 45 A 138,126,30,0,0,10,146" stroke="#A6A5A5"
  stroke-width="1" fill="none" stroke-dasharray="5"/>
  <path d="M 138 45 A 138,126,30,0,1,266,146" stroke="#AE76F8"
  stroke-width="1" fill="none" />
  <!-- 圆点 -->
  <circle cx="10" cy="156" r="5" fill="url(#grad1)"/>
  <circle cx="138" cy="45" r="5" fill="url(#grad1)"/>
  <circle cx="266" cy="156" r="5" fill="url(#grad1)"/>
  <!-- 底部文字 -->
  <text x="10" y="176" fill="#A6A5A5" style="font-size: 10px;">Jan 1, 2017</text>
  <text x="108" y="176" fill="#A6A5A5" style="font-size: 10px;">May 1, 2017</text>
  <text x="216" y="176" fill="#AE76F8" style="font-size: 10px;">Aug 1, 2017</text>
  <!-- 中间图形 -->
  <!-- 中间文字 -->
  <text x="140" y="90" fill="#A6A5A5" style="font-size: 8px;">LATEST TEST</text>
  <text x="140" y="100" fill="#A6A5A5" style="font-size: 8px;">FREQUENCY</text>
  <text x="158" y="133" fill="#FFFFFF" style="font-size: 20px;">3</text>
  <text x="178" y="133" fill="#FFFFFF" style="font-size: 8px;">months</text>
</svg>

.svg{width: 300px; height: 180px;}
@media only screen and (min-width: 1600px) {
  .svg{width: 330px; height: 198px}
}
@media only screen and (min-width: 1920px) {
  .svg{width: 390px; height: 234px}
}