svg

Posted bokeyanghao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg相关的知识,希望对你有一定的参考价值。

svg:矢量图

  canvas:用于绘制位图

  svg:使用xml格式绘制图形

  svg:要有一个根节点,标签就相当于html

  svg 命名空间  xmlns="http://www.w3.org/2000/svg"  版本 version="1.1"

  svg如果不设置大小,默认占用位置 300x150

  定义矩形:rect标签,必填的两个属性 width height

  rect的属性:

    width:宽

    height:高

    x:x轴坐标;

    y:y轴坐标;

    rx:边框圆角;

    style="fill;red":样式属性

    fill:填充颜色

    stroke-width:边框宽度

    stroke:边框颜色

    fill-opacity:填充透明度

    stroke-opacity:边框透明度;

    opacity:同时定义填充和边框的透明度

  定义圆:circle标签

    属性:

      cx:定义x轴坐标

      cy:定义y轴坐标

      r:半径

      style="fill;red":样式属性

      fill:填充颜色

      stroke-width:边框宽度

      stroke:边框颜色

      fill-opacity:填充透明度

      stroke-opacity:边框透明度;

      opacity:同时定义填充和边框的透明度

  定义椭圆:ellipse标签

    属性:

      cx:定义x轴坐标;

      cy:定义y轴坐标;

      rx:定义x轴半径;

      ry:定义y轴半径;

      style="fill;red":样式属性

      fill:填充颜色

      stroke-width:边框宽度

      stroke:边框颜色

      fill-opacity:填充透明度

      stroke-opacity:边框透明度;

      opacity:同时定义填充和边框的透明度

  绘制直线的标签:line

    属性:

      x1:起始坐标 x 轴

      y1:起始坐标 y 轴

      x2:结束坐标 x 轴

      y2:结束坐标 y 轴

  定义多边形:polygon标签

    属性:

      points:用于定义写多边形角的坐标,

      案例:points="20,12 50,45 30,60"

      fill-rule:奇偶判断;

  折线:polyline标签:由直线绘制路径

    属性:

      points:同polygon标签;

  路径:path,分大小写,大写代表绝对 ,小写代表相对;

    属性:

      d:多个属性的集合

      M:代表起始点 moveTo

      L:代表领点 lineTo

      Z:代表 closePath;构成一个闭合回路

      案例:d="M100,30 L200,20 Z";

       H:代表水平划线(默认与y轴上面的值一致)

       v:代表垂直线条(默认与x轴上面的值一致)

      A:用于划曲线  x 代表半径   y 代表半径  0 代表角度(0代表圆) 弧长(0代表小狐长,1代表大弧长),方向(0代表逆时针,1代表顺时针),终点的x坐标,终点的y坐标;

      案例:<path d="M30,30 A25,75,90,1,1,80,80 " stroke="red"></path>   椭圆案例

         <path d="M30,30 A25,25,0,0,0,80,80" stroke="red"></path>  半圆案例     

  transform属性:svg中的一个属性,translate 代表平移 ,rotate 代表旋转 ,scale 代表缩放

  transform属性:平移,旋转都是以起点0,0(svg的左上角)为参考点,而css3中以元素的中心点为参考点;

  text标签:定义文本:x,y的值在字体左上角,text-anchor="middle" 让字体居中

  g标签:用于相关元素的一个组合;

    g身上的属性,子元素都会被继承,g上的属性必须是显现属性,不能是svg私有的 ,比如 g 上的圆心坐标不行;

  image标签:绘制图片  

    x:x轴坐标

    y:y轴坐标

    width:宽

    height:高

    xlink:href="图片路径"

  use标签:复制一个

    x属性和y属性:相对于被克隆的坐标位置  不是相对于svg的0,0点的坐标

    xlink:href属性:复制标签的锚点;

    案例:

      <text x="60" y="30" text-anchor="middle" stroke="red" id="a">hello world</text>

      <use x="2" y="2" xlink:href="#a"></use>

  animate标签:动画

    attributeName:目标属性名称;

    from="" to="" :  从哪到哪;

    dur:持续时间

    repeatCount="indefinite"  动画的无限次播放

    注意事项:写在需要动画元素的中间

    案例:

      <rect x="60" y="50" width="50" height="50" fill="red">

        <animate attributeName="width" from="50" to="200" dur="2" repeatCount="indefinite"></animate>

      </rect>

以上是关于svg的主要内容,如果未能解决你的问题,请参考以下文章

SVG入门

svg用啥打开

svg是啥格式啊

深入理解 SVG 系列 —— SVG 基础

html SVG:svg,rect:SVG翻译深绿色矩形

html SVG:svg,rect:旋转彩色SVG矩形30度