如何在HTML5中使用SVG
2个回答
展开全部
在HTML5中使用SVG
12月12日北京OSC源创会 —— 开源技术的年终盛典 »
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>
具体参考：http://www.oschina.net/question/89964_62708
http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
展开全部
如果你的意思是在html5里面引入svg的话，有两种方法：
内联：直接将svg文件里面的代码粘贴到html代码里面，标签可以被正常识别。同时标签遵循css规则，也可以被js选取控制，可以完成动画效果。
外联：将svg保存成svg后缀文件，使用img标签，在src属性里面引入，即可类似图片形式展示。
需要注意的是很多svg制作工具制作出来的svg标准有点差别，可能某些svg文件不能正确的被识别显示。
内联：直接将svg文件里面的代码粘贴到html代码里面，标签可以被正常识别。同时标签遵循css规则，也可以被js选取控制，可以完成动画效果。
外联：将svg保存成svg后缀文件，使用img标签，在src属性里面引入，即可类似图片形式展示。
需要注意的是很多svg制作工具制作出来的svg标准有点差别，可能某些svg文件不能正确的被识别显示。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
