SVG

矩形

rect
           x:100;            
            y:100;
            width:200px;            矩形的宽
            height: 200px;          矩形的高
            stroke:#000;            描边颜色
            fill:#f00;              填充颜色
            stroke-width: 20;       描边宽度
            stroke-opacity:0.5;     描边透明度
            fill-opacity: 0.5;      填充透明度

圆形

circle
            cx:400;          圆心x
            cy:200;          圆心y
            r:100;           半径
            stroke:#000;     描边颜色
            fill:#f90;       填充颜色
            opacity:0.5;     透明度
            stroke-width:20; 描边宽度

椭圆

ellipse
            cx:300;           圆心x
            cy:300;           圆心y
            rx:150;           横向半径
            ry:100;           纵向半径
            stroke:#000;      描边颜色
            fill:#f90;        填充颜色

线

line
          <line x1="100" y1="100" x2="400" y2="400" id="line1"></line>
          x1:起点x
          y1:起点y
          x2:终点x
          y2:终点y
          stroke:#f90;                描边颜色
          stroke-width: 20;           描边宽度

多边形

polygon
          <polygon points="200,10 250,190 160,210" fill="#f90"
                 stroke="#000"></polygon>

           points:多边形的几个点
           fill:填充颜色
          stroke:描边颜色
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、什么是SVG? SVG指可伸缩矢量图形(Scalable Vector Graphics); SVG用来定义用...
    清心挽风阅读 5,225评论 1 3
  • 一:什么是SVG? 对于SVG的定义如下: ①:SVG 指的是可伸缩矢量图形 (Scalable Vector G...
    GreenHand1阅读 4,272评论 0 1
  • SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 <rect> 圆形 <circle> 椭圆 <elli...
    _chuuuing_阅读 4,819评论 0 0
  • SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 4,619评论 0 1
  • 念初中时,学校每年都要给我们分一次班,三年胡乱分下来,只有一个同学跟我一直是在一个班,我当时一直认为是缘分使然,我...
    马上有腹肌的大帅阅读 3,579评论 0 0