最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG <clipPath>


<clipPath>标记的作用相当于一个蒙版,它能限制哪些地方可见,哪些地方不可见。<clipPath>标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).

<clipPath>元素需要使用clip-path属性来引用。


SVG路径


<path>元素可以用来定义一个路径。

首先理解一下定义路径时各种字符命令代码的意思:

指令 参数 名称 描述
M x,y moveto
移动到
移动虚拟画笔到指定的(x,y)坐标,仅移动不绘制
m x,y moveto 同M,但使用相对坐标
L x,y lineto
连直线到
从当前画笔所在位置绘制一条直线到指定的(x,y)坐标
l x,y lineto 同L,但使用相对坐标
H x horizontal lineto
水平连线到
绘制一条水平直线到参数指定的x坐标点,y坐标为画笔的y坐标
h x horizontal lineto 同H,但使用相对坐标
V y vertical lineto
垂直连线到
从当前位置绘制一条垂直直线到参数指定的y坐标
v y vertical lineto 同V,但使用相对坐标
C x1,y1 x2,y2 x,y curveto
三次方贝塞尔曲线
从当前画笔位置绘制一条三次贝兹曲线到参数(x,y)指定的坐标。x1,y1和x2,y2是曲线的开始和结束控制点,用于控制曲线的弧度
c x1,y1 x2,y2 x,y curveto 同C,但使用相对坐标
S x2,y2 x,y shorthand / 平滑三次方贝塞尔曲线 从当前画笔位置绘制一条三次贝塞尔曲线到参数(x,y)指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
s x2,y2 x,y shorthand / 平滑三次方贝塞尔曲线 同S,但使用相对坐标
Q x1,y1 x,y 二次方贝塞尔曲线 从当前画笔位置绘制一条二次方贝塞尔曲线到参数(x,y)指定的坐标。x1,y1是控制点,用于控制曲线的弧度
q x1,y1 x,y 二次方贝塞尔曲线 同Q,但使用相对坐标
T x,y 平滑的二次贝塞尔曲线 从当前画笔位置绘制一条二次贝塞尔曲线到参数(x,y)指定的坐标。控制点被假定为最后一次使用的控制点
t x,y 平滑的二次贝塞尔曲线 同T,但使用相对坐标
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 椭圆弧线 从当前画笔位置开始绘制一条椭圆弧线到(x,y)指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位,取值0或1,用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向
a rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 椭圆弧线 同A,但使用相对坐标
Z 闭合路径 从结束点绘制一条直线到开始点,闭合路径
z 闭合路径 同Z

注意:所有的这些字符命令都可以用大小写两种形式。大小表示绝对位置,而小写表示相对位置。


例 1

下面的例子里定义了一个路径,从点 150,0 开始,连直线到点 75,200,然后连直线到点 225,200,最后闭合这个路径,连直线回到点 150,0:


  
  Sorry, your browser does not support inline SVG.

上面的例子使用了下面的SVG代码:

<svg height="210" width="400">
	  <path d="M150 0 L75 200 L225 200 Z" />
	</svg>

例 2

贝塞尔曲线是一种非常顺滑的曲线。通常,用户需要提供两个端点和一个或两个控制点。使用一个控制点的贝塞尔曲线叫做二次方贝塞尔曲线,使用两个控制点的贝塞尔曲线叫做三次方贝塞尔曲线。

下面的例子里使用了二次方贝塞尔曲线,其中 A 和 C 分别是两个端点,B是控制点:



  
  
  
  
  
    
    
    
  
  
  
    A
    B
    C
  
  Sorry, your browser does not support inline SVG.

上面的例子里使用了下面的SVG代码:

<svg height="400" width="450">
	  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
	  stroke-width="3" fill="none" />
	  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
	  stroke-width="3" fill="none" />
	  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
	  fill="none" />
	  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
	  stroke-width="5" fill="none" />
	  <!-- Mark relevant points -->
	  <g stroke="black" stroke-width="3" fill="black">
	    <circle id="pointA" cx="100" cy="350" r="3" />
	    <circle id="pointB" cx="250" cy="50" r="3" />
	    <circle id="pointC" cx="400" cy="350" r="3" />
	  </g>
	  <!-- Label the points -->
	  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
	  text-anchor="middle">
	    <text x="100" y="350" dx="-30">A</text>
	    <text x="250" y="50" dy="-10">B</text>
	    <text x="400" y="350" dx="30">C</text>
	  </g>
	</svg>

	

复杂吗?的确。因为画路径需要涉及很多的点,所以,最好使用SVG编辑器来创建复杂路径图形。


SVG多边形


<polygon>元素用来绘制多边形图形,比如三角形,四边形,五边形等。

多边形是直线围成的图形。

多边形的英文单词是Polygon,来自希腊,”Poly”的意思是”many”,而 “gon” 的意思是 “angle”。


例 1

下面的是用SVG绘制的三角形:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

代码说明:

  • points属性里定义了多边形各个角的xy坐标,多个坐标间用空格分隔

例 2

下面是一个四边形:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

例 3

下面我们用 <polygon> 元素创建一个五角星:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

代码说明:

  • fill-rule属性的取值可以是nonzero | evenodd | inherit

例 4

使用fill-rule: evenodd属性:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG折线


例 1

<polyline>元素用来绘制各种各样的折线:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="200" width="500">
 
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

例 2

另外一个折线例子:


  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="180" width="500">
 
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
 
style="fill:white;stroke:red;stroke-width:4" />
</svg>

代码说明:

  • points属性里定义了各个点的坐标,xy坐标之间用逗号分别,多个坐标之间用空格分割

SVG直线


<line>元素可以用来画出一条直线:


  	
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="210" width="500">
 
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

代码说明:

  • x1属性定义了直线的x轴起始坐标
  • y1属性定义了直线的y轴起始坐标
  • x2属性定义了直线的x轴终止坐标
  • y2属性定义了直线的y轴终止坐标

SVG椭圆


<ellipse>元素的作用是绘制一个椭圆。

椭圆跟圆形很相似。不同之处在于椭圆有两个半径,并且这两个值不同,而圆形也可以说有两个半径,但两个值是相同的:


例 1

下面是一个用SVG绘制的椭圆:


  
  Sorry, your browser does not support inline SVG.

上面的SVG椭圆使用了下面的SVG代码:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

代码说明:

  • cx属性定义了椭圆的x坐标
  • cy属性定义了椭圆的y坐标
  • rx属性定义了椭圆的横向半径
  • ry属性定义了椭圆的纵向半径

例 2

下面的代码依次绘制出了三个SVG椭圆:


  
  
  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="150" width="500">
 
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
 
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
 
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
</svg>

例 3

下面的SVG代码画了两个椭圆(一个黄色,一个白色):


  
  
  Sorry, your browser does not support inline SVG.

上面的SVG图形使用了下面的代码:

<svg height="100" width="500">
 
<ellipse cx="240" cy="50" rx="220" ry="30"
style="fill:yellow" />
 
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:white" />
</svg>

SVG圆形


<circle>元素的作用是绘制圆形:


  
  Sorry, your browser does not support inline SVG.

上面的SVG图片使用了下面的SVG代码:

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

代码说明:

  • cxcy属性是用来定义圆心的坐标。如果没有提供cxcy的值,则缺省圆心是(0,0)
  • r属性定义了圆的半径长度

SVG矩形


SVG形状

SVG里预定义里一些形状,程序员可以使用这些元素来绘制图形:

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

后面的章节将会一一介绍这些元素,现在我们从矩形开始。


SVG画矩形 – <rect>

例 1

<rect>用来绘制一个矩形,以及类似图形,比如长方形,正方形等。


  
  抱歉,你的浏览器不支持SVG

上面的这个SVG图片的代码是:

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

代码说明:

  • <rect>元素里的widthwidth属性定义了矩形的高度和宽度
  • style属性定义了这个矩形的CSS属性。
  • style属性里的fill属性定义了这个矩形填充的颜色
  • style属性里的stroke-width属性定义了矩形边线的宽度
  • style属性里的stroke属性定义了矩形的边线的颜色

例 2

这个例子里我们将会看到一些新属性:

  
 
  
  抱歉,你的浏览器不支持SVG


上面的图像使用了下面的SVG代码:

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

代码说明:

  • x属性定义矩形距离左边的距离,比如,x="50"相对于CSS里的margin-left: 50px
  • y属性定义了矩形距离上边的距离,比如y="20"相当于CSS里的margin-top: 20px
  • CSS fill-opacity属性定义了填充颜色的透明度,值范围为 0 到 1
  • CSS stroke-opacity属性定义了边线颜色的透明度,值范围为 0 到 1

例 3

定义整个图像元素的透明度:

  
  
  
  抱歉,你的浏览器不支持SVG

上面的图像使用了下面的SVG代码:

<svg width="400" height="180">
 
<rect x="50" y="20" width="150" height="150"
 
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

代码说明:

  • CSS opacity属性定义了整个图形元素的透明度

例 4

最后一个例子,创建一个具有圆角效果的SVG矩形图形:

  

  
 抱歉,你的浏览器不支持SVG

上面的SVG图形使用了下面的SVG代码:

<svg width="400" height="180">
 
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

代码说明:

  • rxry定义了矩形四个角的圆角效果