如何在HTML5中使用SVG

彭博 发布于 2012/07/30 18:26
阅读 11K+
收藏 30

SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性,就能获得一致的图像元素。

使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样,你可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。

现在就将SVG元素加入到我们HTML代码中,SVG提供很多绘图形状,例如线条、圆、多边形等。

SVG线条:

SVG线条用标签定义,在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后,可以为之添加一些样式,在style属性中使用“stroke:Green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。

代码1:使用SVG画线

<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
  <!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
   <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>

在线演示

SVG画圆:

SVG提供了一种不同的标签来画圆。正如你看到的下面代码,circle有个id为myCircle。为了定义圆的中心以及半径,使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。

代码2:使用SVG画圆

<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>

在线演示

SVG矩形:

同样的使用标签来画矩形,我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽,使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意,我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。

代码3:SVG画矩形  

<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>          
</svg>
</body>
</html>

在线演示 

SVG椭圆: 

我们同样是用标签来绘制椭圆。设置其 id="myEllipse" ,给定起中心坐标 cx="120"cy="60",长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。

代码4:SVG画椭圆

<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>    
</svg>
</body>
</html>

在线演示

SVG多边形: 

我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点,用左边对来定义,形如 points="10,10 75,150 150,60" ,这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样,用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。

代码5:SVG画多边形 

<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/> 
</svg>
</body>
</html>

在线演示

原文链接 / OSChina.NET原创翻译

加载中
1
铂金小鸟
铂金小鸟

osc

@红薯 @ChazZ  小弟不才。哈哈

 

<?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">
	<path fill="#40AA53" stroke="#000" stroke-width=2 
	d="M300 200 a 150,150 0 1 0 0,150 l -70,-40 
	a 70,70 0 1 1 0,-70  Z" />
</svg>

chazz
chazz
佩服啊..
彭博
彭博
牛逼!
铂金小鸟
铂金小鸟
回复 @彭博 : 对,忘了这么还得tool。 地址 http://www.osctools.net/jsbin/qfdzvujo/1
彭博
彭博
在osctools的jsbin做个演示呗
0
chazz
chazz
能画个osc的标志不?
chazz
chazz
回复 @彭博 : 技术在那搁着呢.我没那能力啊.还要从头开始学呢.
彭博
彭博
嘿嘿,要不你试试?
0
傅红雪_osc
傅红雪_osc
技术本身很好  哈哈
0
Sephiroth
Sephiroth
我一直比较怀疑SVG的兼容性
0
AlanShi
AlanShi
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>OS China</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
    <circle id="myCircle" cx="55" cy="55" r="20" fill="#ffffff" stroke="#17301D" stroke-width="2" />
    <polygon id="myPolygon" points="50,50 50,70 120,30 120,80" style="fill:#ffffff;stroke:#white;stroke-width:2" /> 
</svg>
</body>
</html>

按照例子画OSC标志,不完善

AlanShi
AlanShi
回复 @彭博 : good job
彭博
彭博
这个是我改造的 嘿嘿 http://www.osctools.net/jsbin/tpthlucj/2
0
彭博
彭博

@tide 这个是效果  

<!DOCTYPE html>
<head>
<title>OSCHINA SVG LOGO</title>
</head>
<body>
  <h2>OSChina Logo</h2>
<svg id="svgCircleTutorial" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
    <circle id="myCircle" cx="55" cy="55" r="20" fill="#ffffff" stroke="#17301D" stroke-width="2" />
    <polygon id="myPolygon" points="72,64 72,46 120,30 120,75" style="fill:#ffffff;stroke:;stroke-width:2" />
    <line x1="72" y1="64" x2="103" y2="70" style="stroke:17301D;stroke-width:2"/>
    <line x1="72" y1="46" x2="102" y2="34" style="stroke:17301D;stroke-width:2"/>
</svg>
</body>
</html>

彭博
彭博
回复 @阿酷 : 求改...
阿酷
阿酷
缺口的角度不对
返回顶部
顶部