D3.js学习之SVG

因为需要所以开始了,D3.js的学习之路。

在开始学的时候,发现的学习D3.js需要有一些SVG和canvas的知识,这些是我之前都没有接触过的,所以现在从svg开始学习了。

SVG可缩放矢量图,使用XML格式SVG文件必须使用.svg后缀来保存。先来一个例子:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

SVG 代码解析:

第一行包含了 XML 声明。请注意 standalone 属性!该属性规定此 SVG 文件是否是"独立的",或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C,含有所有允许的 SVG 元素。

SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽,黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释:所有的开启标签必须有关闭标签!

 

SVG中预定义了七种形状元素:

  分别为:矩形<rect>、圆形<circle>、椭圆形<ellipse>、线段<line>、折线<polyline>、多边线<polygon>、路径<path>。

  一、矩形<rect>

    六个参数:

      x:矩形左上角的x坐标; y:矩形左上角的y坐标;

      width:矩形的宽度;height:矩形的高度;

      rx:对于圆角矩形,指定椭圆在x方向的半径;ry:对于圆角矩形,指定椭圆在y方向的半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="40" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

      建议在菜鸟教程中实例操作一下,可以加深印象(自己修改参数的值,看效果)。

  二、圆形<circle>

    三个参数:

      cx:圆心的x坐标;cy:圆心的y坐标;r:圆的半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>   

       菜鸟教程实例操作

  三、椭圆<ellipse>

    四个参数:

      cx:圆心的x坐标; cy:圆心的y坐标;

      rx:椭圆的水平半径;ry:椭圆的垂直半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

      菜鸟教程实例操作。

  四、线段<line>

    四个参数:

      x1:起点的x坐标;y1:起点的y坐标;

      x2:终点的x坐标;y2:终点的y坐标;

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />  //实例

  五、折线<polyline>

    属性points:"x,y x1,y1 x2,y2";(x,y是坐标,x1,y1是下一个坐标)每一组都用空格分隔。 

<ployline points="100,20 20,90 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:3" transform="translate(200,0)" />

  六、多边形<polygon>

    多边形就是折线的最起始和最后的点连接,得到的图形。

<polygon points="100,20 20,90 60,160 140,160 180,90" 
        style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>

  七、路径<path>

    M=moveto:将笔画移动到指定坐标。

    L=lineto:画直线到指定坐标。

    H=horizontal lineto:画水平直线到指定坐标。

    V=vertical lineto:画垂直直线到指定坐标。

    C=curveto:画三次贝塞尔曲线经两个指定控制点到达终点坐标。

    S=shorthand/smooth curveto:与前一条三次贝赛尔曲线相连,第一个控制点前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点,即可绘制一个三次贝赛尔曲线。

    Q=quadratic Bezier curveto:画二次贝赛尔曲线一个指定控制点到达终点坐标。

    T=Shortand/smooth quadratic Bezier curveto:与前一条二次贝赛尔曲线相连,第一个控制点前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点,即可绘制一个二次贝赛尔曲线。

    A=elliptical arc:画椭圆曲线到指定坐标。

    Z=closepath:绘制一条直线连接终点和起点,用来封闭图形。

    上述命令都是用大写英文字母,表示坐标系中的绝对坐标(absolute)。也可以用小写英文字母,表示相对坐标(相对当前笔画所在点)。

    弧线:A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)

        rx:椭圆x方向半轴大小;ry:椭圆y方向半轴大小;x-axis-rotation:椭圆形的x轴与水平轴顺时针方向的夹角;large-arc-flag:有两个值(1:大角度弧线,0:小角度弧线);sweep-flag:有两个值(1:顺时针至终点,0:逆时针至终点);x:终点x坐标;y:终点y坐标。

  八、文本<text>

    六个参数:

      x:文本位置的x坐标;y:文字位置的y坐标;

      dx:相对于当前位置在x方向上平移的距离(值为正则往右,负则往左)。

      dy:相当于当前位置在y方向上平移的距离(值为正则往下,负则往上)。

      textLength:文字的显示长度(不足则拉长,足则压缩)。

      totate:旋转角度(顺时针为正,逆时针为负)。

      如果对多个文字中的部分文字单独定义样式可以用<tspan>标签。

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
     I am <tspan fill="yellow">programmer</tspan>
</text>

SVG样式:

  fill:填充色,改变文字<text>的颜色也用它。

  stroke:轮廓线的颜色。

  stroke-width:轮廓线的宽度。

  stroke-linecap:线头端点的样式,圆角,直角等。

  stroke-dashanray:虚线的样式。(实例) 第一个是虚线长度,第二个是间隔空白长度......

  opacity:透明度,0.0为完全透明,1.0完全不透明。

  font-family:字体。

  font-size:字体大小。

  font-weight:字体粗细。

  font-style:字体的样式,斜体等。

  text-decoration:上画线、下划线等。

SVG标记<marker>:

  标记(marker),也就是给线段添加箭头。marker定义一组标记,defs定义可重复利用的图形。

  marker的一些属性:

    viewBox:坐标系的区域

    refX,refY:在viewBox内的基准点,绘制时此点在直线端点上。

    markerWidth,markerHeight:标识的大小。

    orient:绘制方向,可设定为auto(自动确认方向)和角度值。

    id:标识的id号。

  给线段添加箭头,首先先定义一个箭头,在调用这个箭头。

<defs>
<marker id="arrow"
    markerUnits="strokeWidth"
    markerWidth="12"
    markerHeight="12"
    viewBox="0 0 12 12"
    refsX="6"
    refsY="6"
    orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000" />
</marker>
</defs>

  这是一条带箭头的曲线:

<path d="M20,70 T80,100 T160,80 T200,90" 
         fill="white" stroke="red" stroke-width="2"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />    

  marker-start:路径起点处。

  marker-mid:路径中间端点处。(箭头将绘制在路径的节点处,so对直线无效)

  marker-end:路径终点处。

SVG滤镜<filter>:

  滤镜可使图形具有艺术效果,对源图形的数学参数不会改变,只是进行了渲染后传给显示器。

  滤镜filter和标识marker使用方法是一样的。在<defs>中定义,设定一个id定义需要用到的滤镜,在调用。

  可以通过W3C看一些需要的滤镜效果。

SVG渐变:

  有线性渐变<linearGradient>、放射性渐变<radialGradient>。

  渐变也是定义在<defs>标签中,定义一个id号,在调用这个id。例:

<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  //水平线性渐变 <stop offset="0%" stop-color="#F00" /> <stop offset="100%" stop-color="#0FF" /> </linearGradient> </defs> //offset定义渐变开始的位置 //stop-color定义此位置的颜色 <rect fill="url(#myGradient)" x="10" y="10" width="300" height="100">
//垂直线性渐变 就将x1、x2、y1、y2分别变成0%、0%、0%、100%

  

 

转载于:https://www.cnblogs.com/luoyong5213/p/7610505.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值