svg使用教程

svg形状

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径
  svg属性
  version用来定义svg的版本
  xmlns 定义 SVG 命名空间
  width 和 height 定义高度和宽度
  style 定义 CSS 属性
  CSS 的 fill 定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  CSS 的 stroke-width 定义矩形边框的宽度
  CSS 的 stroke 定义矩形边框的颜色
  CSS 的 opacity 定义整体透明度的
  CSS 的 stroke-opacity定义边框透明度
  CSS 的 fill-opacity定义内容透明度

<div>
        <!-- 
            矩形
            x和y用来定义距离盒子左侧和顶部的距离 默认是浏览器窗口
            rx和ry设置圆角的，都可以一个控制4个角，就是大小的问题
        -->
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect width="50" height="50" x="20" y="40" rx="5" ry="10" style="fill:red;stroke-width:10;stroke:orange; opacity:1;stroke-opacity:0.5;"></rect>
        </svg>
        <!-- 
            圆形
            cx 和 cy 属性定义圆点的 x 和 y 坐标。默认是（0,0）
            r 属性定义圆的半径
        -->
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cy="50" cx="50" r="40"  style="fill:red;stroke-width:10;stroke:orange;"></circle>
        </svg>
        <!-- 
            椭圆
            cx和cy 和矩形x，y相同
            rx就相当于椭圆宽 ry就相当于椭圆高
            层叠的椭圆就是高度尽量小，宽度大，然后偏移量根据需要来调整就可以
            包含的椭圆就是偏移量一样在中心位置（可调整） 第一个的宽度和高度要比第二个大
         -->
         <svg width="500" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <!-- <ellipse cx="100" cy="20" rx="60" ry="2"  style="fill:red;"></ellipse>
            <ellipse cx="150" cy="60" rx="80" ry="5"  style="fill:blue;"></ellipse>
            <ellipse cx="210" cy="100" rx="120" ry="10"  style="fill:green;"></ellipse> -->

            <ellipse cx="200" cy="50" rx="200" ry="40" style="fill: red;"></ellipse>
            <ellipse cx="200" cy="50" rx="100" ry="20" style="fill: orange;"></ellipse>
        </svg>
        <!-- 
            线条
            x1 属性在 x 轴定义线条的开始
            y1 属性在 y 轴定义线条的开始
            x2 属性在 x 轴定义线条的结束
            y2 属性在 y 轴定义线条的结束
            类似于坐标x和y轴
            线属于的边框，所以要给边框宽度和颜色
         -->
         <svg width="500"  height="200"  version="1.1"xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="0" x2="500" y2="200" style="stroke-width:1;stroke:red"></line>
        </svg>
        <!-- 
            多边形
            points是每个角的坐标
            （0,0）（100,100）（200,200）（300,300）就是一条线
            多边形就是需要把这一块围起来
         -->
        <svg width="500"  height="200"  version="1.1"xmlns="http://www.w3.org/2000/svg">
            <polygon points="0,0 100,0 100,150, 0,150 "style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
        </svg>
        
        <!-- 
            折线
            和多边形原理一样，就是属性不同，多边形围起来会自己连上线，这个是你点在哪就连到哪
         -->
         <svg width="500"  height="100"  version="1.1"xmlns="http://www.w3.org/2000/svg">
            <polyline points="0,0 0,20 20,20 20,40 40,40 40,60 "style="fill:#ffffff; stroke:#000000;stroke-width:1"/>
        </svg>
        <!-- 
            路径
            这个不说了，说不明白
            路径这种的就去找在线等svg编辑工具
            然后使用ctrl+u 把代码拷贝出来拿过用就ok
            http://www.zuohaotu.com/svg/
         -->
         <svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M153 334
            C153 334 151 334 151 334
            C151 339 153 344 156 344
            C164 344 171 339 171 334
            C171 322 164 314 156 314
            C142 314 131 322 131 334
            C131 350 142 364 156 364
            C175 364 191 350 191 334
            C191 311 175 294 156 294
            C131 294 111 311 111 334
            C111 361 131 384 156 384
            C186 384 211 361 211 334
            C211 300 186 274 156 274"
            style="fill:white;stroke:red;stroke-width:2"/>
        </svg>
    </div>