HTML5 SVG

svg相对来说比较简单 直接上代码：

SVG:
<!-- 直接嵌入SVG代码 
<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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 右下角的两个宽 是对应的宽度 左上角是其一半 stroke=opacity是一半的内容填充区-->
<rect width='100' height="100" rx='10' ry='10' style="fill:blue;stroke-opacity:.8;" />

<circle cx="100" cy="50" r="20" style="fill:red;stroke:black;" />
<!--  椭圆-->
<ellipse cx="200" cy="100" rx='50' ry="20" style="fill:red;" />
<!-- 直线 -->
<line x1='100' y1="200" x2='10' y2='20' style="stroke:black;" />
<!-- 多边形 -->
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
<!-- 曲线 -->
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />

<!-- SVG路径 -->
<path d='M100 0 L200 300 L0 300 Z /' style="fill:red;"/> 


  <text x="0" y="15" fill="red">I love SVG</text>
<!--可对文本进行沿着路径编辑 -->
 <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>

<!-- 高斯模糊 -->
 <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

<!-- 圆 -->
<svg xmlns="http://www.w3.org/2000.svg" version="1.1">
<circle cx="100" cy="50" r="20" style="fill:red;stroke:black;" />
</svg>

 

上边是我自己在学的时候的一些案例， 也有一些其它用法，没深入学习，此处待续~