svg基础知识体系建立

一、简介：SVG 是使用 XML 来描述二维图形和绘图程序的语言。

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二、SVG 嵌入HTML

1. <embed> 标签被所有主流的浏览器支持，并允许使用脚本。但不推荐在HTML4和XHTML中使用（但在HTML5允许）

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

2. <iframe> 标签可工作在大部分的浏览器中。但不推荐在HTML4和XHTML中使用（但在HTML5允许）

<iframe src="rect.svg" width="300" height="100">
</iframe>

frameborder 是否显示边框（0无边框 1有边框）

scrolling 是否有滚动条（yes有滚动条 no无滚动条）

allowtransparency 背景是否透明（yes透明 no不透明）

3.直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。
注意：SVG不能直接嵌入到Opera。

<html>
<body>
<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>
</body>
</html>

三、SVG 形状

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>


矩形示例：


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-1;
stroke:rgb(0,0,0)"/>

</svg>




代码解释：


    

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
    • 

  • style 属性用来定义 CSS 属性
    • 

  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
    • 

  • CSS 的 stroke-width 属性定义矩形边框的宽度
    • 

  • CSS 的 stroke 属性定义矩形边框的颜色
    • 

  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
    • 

  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
    • 

  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
    • 

  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
    • 

  • rx 和 ry 属性可使矩形产生圆角。
    • 





圆形示例：
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>




代码解释：


cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)


r 属性定义圆的半径。




椭圆示例：
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-2"/>




代码解释：


    

  • cx 属性定义圆点的 x 坐标
    • 

  • cy 属性定义圆点的 y 坐标
    • 

  • rx 属性定义水平半径
    • 

  • ry 属性定义垂直半径
    • 





线条示例
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-2"/>




代码解释：


    

  • x1 属性在 x 轴定义线条的开始
    • 

  • y1 属性在 y 轴定义线条的开始
    • 

  • x2 属性在 x 轴定义线条的结束
    • 

  • y2 属性在 y 轴定义线条的结束
    • 





多边形示例：
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-1"/>




代码解释：


points 属性定义多边形每个角的 x 和 y 坐标




折线示例：
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-2"/>






路径示例：
<path d="M250 150 L150 350 L350 350 Z" style="fill:white;stroke:red;stroke-2"/>





上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。


下面的命令可用于路径数据：


    

  • M = moveto
    • 

  • L = lineto
    • 

  • H = horizontal lineto
    • 

  • V = vertical lineto
    • 

  • C = curveto
    • 

  • S = smooth curveto
    • 

  • Q = quadratic Belzier curve
    • 

  • T = smooth quadratic Belzier curveto
    • 

  • A = elliptical Arc
    • 

  • Z = closepath
    • 



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


四、SVG滤镜


在 SVG 中，可用的滤镜有：


    

  • feBlend
    • 

  • feColorMatrix
    • 

  • feComponentTransfer
    • 

  • feComposite
    • 

  • feConvolveMatrix
    • 

  • feDiffuseLighting
    • 

  • feDisplacementMap
    • 

  • feFlood
    • 

  • feGaussianBlur
    • 

  • feImage
    • 

  • feMerge
    • 

  • feMorphology
    • 

  • feOffset
    • 

  • feSpecularLighting
    • 

  • feTile
    • 

  • feTurbulence
    • 

  • feDistantLight
    • 

  • fePointLight
    • 

  • feSpotLight
    • 



注释：您可以在每个 SVG 元素上使用多个滤镜！




滤镜示例：！必须在 <defs> 标签中定义 SVG 滤镜。！
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Gaussian_Blur"> //高斯模糊
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-2;filter:url(#Gaussian_Blur)"/>

</svg>




<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？


<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。


代码解释：


    

  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
    • 

  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
    • 

  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
    • 

  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
    • 

  • in="SourceGraphic" 这个部分定义了由整个图像创建效果
    • 



五、SVG 线性渐变


！SVG 渐变必须在 <defs> 标签中进行定义。！


渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。


在 SVG 中，有两种主要的渐变类型：


    

  • 线性渐变
    • 

  • 放射性渐变
    • 





线性渐变示例：
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>





线性渐变可被定义为水平、垂直或角形的渐变：


    

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
    • 

  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
    • 

  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
    • 



代码解释：


    

  • <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
    • 

  • fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
    • 

  • <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
    • 

  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
    • 





放射性渐变：
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>





代码解释：


<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。



补充：文字的实现


参考：https://www.jianshu.com/p/54c33f498fdc





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/bbcfive/p/10041432.html