关于前端:SVG-入门

外围劣势

• XML 的格局，容量较小
• 比拟灵便，能够批改款式

自适应缩放

• viewport：是 SVG 的可视区域，就是 SVG 的属性 width 和 height 的范畴，来到可视区域外的内容是不会被渲染的。

• viewBox：用于画布上制作 SVG 图形的坐标零碎（viewBox="x, y, width, height"）默认和 viewBox 统一。

  <svg width="20px" height="20px" viewBox="0 0 20 20">xxx</svg> 

  • 如果进行手动指定，SVG 会进行主动换算缩放比：width/viewBox.width、height/viewBox.height

    <svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #000;">
      <rect x="20" y="10" width="10" height="5" style="stroke: #000; fill: none;"/>
    </svg> 

    Tip：viewBox 个别作为动态值须要固定下来，width 和 height 是能够动静批改的

• preserveAspectRatio：保留宽高比，当 viewport 和 viewBox 宽高比不雷同时，指定在 viewport 中的绘制区域，默认值是 xMidYMid meet

  • meet：示意固定宽高比，并将 viewBox 缩放为 viewport 的大小

    在 meet 模式下，最终压缩比优先驳回压缩比拟小的。（设置 yMid/yMin/yMax 都一样）

  • slice：放弃宽高比并将所有不在 viewport 中的 viewBox 裁掉

    在 slice 模式下，最终压缩比优先驳回压缩比拟大的。（设置 xMid/xMin/xMax 都一样）

  • xMidyMid：（x 轴和 y 轴一样）

    • xMid：viewBox 的 x 轴的中点在 viewport 的 x 轴中点
    • xMin：viewBox 的 x 轴的终点 (最小边) 在 viewport 的 x 轴终点(最小边)
    • xMax：viewBox 的 x 轴的起点 (最大边) 在 viewport 的 x 轴起点(最大边)

  • none：不放弃宽高比，缩放图像适宜整个 viewBox，可能会产生图像变形。

    在 none 模式下，将别离计算 x 和 y 轴的压缩比。