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为线条设置宽度。<!DOCTYPE html><head><title>Mrbool - 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="www.w3/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>
我会继续学习,争取下次回答你
我会继续学习,争取下次回答你
- 0
- 0
- 0
- 0
- 0
更多推荐
svg 多边形
发布评论