html-svg基础-1.1

    使用 XML 来描述二维图形和绘图程序的语言

    SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失

 

SVG使用方法：

///外部文件  svg文件内部的结构如下

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 具体内容 -->
</svg>

引用svg的部分可以是以下几个地方

<embed src="circle1.svg" type="image/svg+xml" />

<object data="circle1.svg" type="image/svg+xml"></object>

<iframe src="circle1.svg"></iframe>

<a href="circle1.svg">View SVG file</a> 

 

///直接引用

    <svg></svg>直接嵌入

相关样式知识

fill:blue;             //填充颜色
fill-opacity:0.1;      //填充透明度

stroke:pink;           //边框颜色
stroke-width:5;        //边框宽度
stroke-opacity:0.9;    //边框

stroke属性

跟css的差不多，设置线、文本或元素轮廓

stroke           颜色

stroke-dasharray 创建虚线 none | 数组（5,5） | inherit

stroke-dashoffset 虚线开始的位置

stroke-width     宽度

stroke-linecap   开放路径的终结 

butt | round | square | inherit

标签

-----------------------------------------------------------------
-----------------------------------------------------------------

1、矩形<rect>

2、圆形<circle>

3、椭圆<ellipse>

4、直线<line>

5、多边形<polygon>

6、折线<polyline>

7、路径<path>

8、文本<text>

9、<defs>

10、<filter>

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

-----------------------------------------------------------------
-----------------------------------------------------------------

 

1、矩形<rect>

<!--  x y: 左上角坐标
    rx ry: 使矩形产生圆角   -->
<!--     stroke:边框的颜色 
   fill-opacity:填充颜色透明度 
 stroke-opacity:笔触颜色透明度  -->

<rect x="50" y="20" width="150" height="150" rx="20" ry="20"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>

2、圆形<circle>

 

<!--  r:半径
  cx cy:圆心坐标  -->

<circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>

3、椭圆<ellipse>

 

<!-- cx cy:椭圆中心坐标
     rx ry:半径  -->

<ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>

4、直线<line>

<!-- x1 y1:起始点坐标
     x2 y2:终点坐标  -->
<line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>

5、多边形<polygon>

 

<!-- 可以形成五角星  -->
<!-- fill-rule:指定算法,判断某区域是否属于"内部" nonzero | evenodd | inherit  -->
<polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

6、折线<polyline>

 

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

7、路径<path>

• M = moveto 移动到 （坐标）
• L = lineto 画线到 （坐标）
• H = horizontal lineto 水平线到 （距离）
• V = vertical lineto   垂直线到 （距离）
• C = curveto  三次贝塞尔曲线到 （坐标 p1 p2 p3）
• S = smooth curveto 光滑三次贝塞尔曲线到 （坐标 p2 p3）
  【当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令】
• Q = quadratic Belzier curve 二次贝塞尔曲线到 （坐标 p1 p2）
• T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线到 （坐标 p2）
• A = elliptical Arc 椭圆弧 
  （rx,ry  xRotation  isLarge,sweep endX,endY）
  【rx：水平方向上的半径；ry：垂直方向上的半径。
    xRotation：设置弧线X轴方向上的旋转,通常不需要，默认值0。
   isLarge   ：从A点到B点绘制一条弧线，可以得到一大一小的弧线。0 1。isLarge==1?大:小。
   sweep     ：0 1。sweep==1?顺时针:逆时针绘制弧线】
• Z = closepath 关闭路径 （）

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<path d="M250 150 L150 350 L350 350 Z" />

8、文本<text>

 

<!-- 如果需要路径，则加defs，否则直接<text>aa</text>即可 -->
<defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<!-- x y:坐标-->
<text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>

<!-- 每个<tspan> 元素可以包含不同的格式和位置 -->
<text x="10" y="20" style="fill:red;">Several lines:
    <!-- 注：xy为绝对位置 -->
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
</text>

9、<defs>

    SVG滤镜定义在<defs>元素中。

10、<filter>

用来定义SVG滤镜。使用必需的id来定义向图形应用哪个滤镜

<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)" />

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

 

 

参考： https://segmentfault.com/a/1190000005053782 svg之<path>详解

    http://www.runoob.com/svg/svg-tutorial.html svg教程 

    http://www.w3school.com.cn/svg/index.asp    svg教程