可视化基础 （2）

SVG

意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。图像在放大或改变尺寸的情况下其图形质量不会有所损失

• viewBox属性 ： viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性preserveAspectRatio。
  不允许宽度和高度为负值,0则禁用元素的呈现。

• preserveAspectRatio属性表示是否强制进行统一缩放.

<!-- 矩形
  rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  style 属性用来定义 CSS 属性
  CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  CSS 的 stroke-width 属性定义矩形边框的宽度
  CSS 的 stroke 属性定义矩形边框的颜色 
  rx 和 ry 属性可使矩形产生圆角。
  x y 是rect相对于svg的位置
  -->

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<!-- 圆形 
  cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
  r 属性定义圆的半径。-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

  <!-- 椭圆 
    cx 属性定义圆点的 x 坐标
    cy 属性定义圆点的 y 坐标
    rx 属性定义水平半径
    ry 属性定义垂直半径
  -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

<!-- 线条  
  x1 属性在 x 轴定义线条的开始
  y1 属性在 y 轴定义线条的开始
  x2 属性在 x 轴定义线条的结束
  y2 属性在 y 轴定义线条的结束-->
<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

  <!-- 
    多边形
    points='x,y x2,y2 x3,y3 x4,y4 。。。 '由哪些点连接而成的多边形
    fill-rule  nonzero | evenodd  属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” 
      nonzero 从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部
      evenodd 字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部
  -->
<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>


<!-- 路线 
  M = moveto
  L = lineto
  Z = closepath
-->
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
  </svg>
  <!-- 上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。 -->

SVG在线编辑器