成都web前端培训
成都达内金融街中心

18328393564

热门课程

web前端-SVG形状的代码分享

  • 时间:2016-10-13 15:25
  • 发布:达内杨老师
  • 来源:达内

给大家讲SVG的一些形状的代码。

线<line>

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

<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轴定义线条的结束

多边形<polygon>

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

<polygon points="200,10 250,190 160,210"

style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

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

折线<polyline>(用于创建任何只有直线的形状)

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

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"

style="fill:none;stroke:black;stroke-width:3" />

</svg>

路径<path>

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

<path d="M150 0 L75 200 L225 200 Z" />

</svg>

<path>元素用于定义一个路径。

上一篇:web前端-SVG滤镜
下一篇:web前端-SVG元素分享
选择城市和中心
贵州省

广西省

海南省