欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

svg的基本图形与属性【小尾巴的svg学习笔记1】

程序员文章站 2022-07-01 13:08:01
因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删。 一、基本图形 1、矩形 x,y定义矩形的左上角坐标; width,height定义矩形的长度和宽度; rx,ry定义矩形的圆角半径长度,这里注意,如果rx给值了ry没给值,ry沿用rx的值,反之同理; 2、圆形 cx与cy定义圆心 ......

因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删。

一、基本图形

  1、矩形

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    x,y定义矩形的左上角坐标;

    width,height定义矩形的长度和宽度;

    rx,ry定义矩形的圆角半径长度,这里注意,如果rx给值了ry没给值,ry沿用rx的值,反之同理;

 

  2、圆形

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    cx与cy定义圆心的坐标;

    r为圆的半径长度;

 

  3、椭圆

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    x,y依旧为圆心的坐标;

    椭圆相较于圆使半径变为两个值,分别为:rx 横向半径和 ry 纵向半径;

    

  4、直线

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    这个较为简单,x1,y1为起点坐标,x2,y2为终点坐标

  5、折线

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    points:坐标,折线也较为简单,用空格或逗号间隔,依次写下目标点坐标。

  6、多边形(闭合折线)

    svg的基本图形与属性【小尾巴的svg学习笔记1】

    points:坐标,基本与第五的折线相同,唯一不同的是多边形会把最后一个点和起点连接起来

二、属性

  1、fill 填充颜色

  2、stork 描边颜色

  3、stork-width 描边粗细

  4、transform 变形,位移(相较于父亲)等

  5、opacity 透明度

  6、 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)

  7、 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)

  

做得不够详细,下次会进行补充,希望能对大家有一点点帮助。下一个笔记将会描述在代码里的实际应用。