SVG矢量图入门

SVG矢量图入门

1. svg是一种xml格式绘制图像的
   使用的时候要先引入svg
   
   这个就相当于html的根节点
   如果svg没有设置大小默认的是300*150
2. 使用

	<defs>
      <pattern id="xxx" x="0" y="0" width="100" height="20" patternUnits="userSpaceOnUse">
        <path d="M 0 0 H 100" stroke="black" stroke-width="1" />
      pattern>
    defs>

这里的pattern所有的属性x，y定义了元素的初始位置， width和 height是画布的大小相当于echarts渲染出来的canvers，

patternUnits有两个值userSpaceOnUse和objectBoundingBox。 userSpaceOnUse:xy都是当前用户的坐标值不会缩放，objectBoundingBox是外框的一个坐标系统，图案放过去会进行一个缩放，比如：pattern中为1的值，会变成和包裹元素的外框的width和height一样的大小

给pattern一个id方便后面在js中被引用

3. js部分

 var svg = d3.select("body").append("svg")
      .attr("width", 500)
      .attr("height", 500)
       svg.append("rect")
      .style("fill", "url(#xxx)")
      .attr("x", 0)
      .attr("y", 0)
      .attr("height", 20)
      .attr("width", 100);

在js中这个操作所完成的是给body创建了一个svg标签元素，然后给svg元素添加了一个rect元素rect元素内部填充的是上面pattern标签所拥有的内容，给定的x，y值是这个rect标签在svg标签内所属的绝对位置

4. 矢量图内部元素
   circle：圆形标签 可以给定的属性 cx，cy，r ，style，fill，stroke，等等

<circle cx="15" cy="2" r="1" style="stroke: none; fill: #000000"  />

开发矢量图权重小的在大图形内部的一定要先画外部图像不然大图像会覆盖小图像

ellipse: 椭圆 可以设定的元素和圆形差不多

<ellipse cx="36" cy="5" rx="4" ry="2" style="fill:gray;stroke:none;"/>

line：线形 x1,y1,x2,y2

 <line x1="0" y1="110" x2="80" y2="110" style="stroke:rgb(0,0,0);stroke-width:1" />

polygon：多边形 points：用于定义写多边形角的坐标，

 <polygon points="50,5 45,15 55,15" style="fill:#ffffff;stroke:#000000;stroke-width:1" />

path：路径

 <path d="M 0 10 H 40" stroke="black" stroke-width="1"/>

大概配置的就是这些东西。。。