×

SVG基础 | 绘制SVG直线、折线和多边形

作者:Web前端之家2016.09.11来源:Web前端之家浏览:10824评论:0
关键词:html5SVG
微信公众号

微信公众号

SVG <line>元素用于绘制一条。下面是一个绘制直线的例子。

600.png

<svg xmlns="http://www.w3.org/2000/svg">
  <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
  <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
  <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

上面代码的返回结果如下:

x1y1属性用于指定直线的起点,x2y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。

SVG折线

<polyline>元素用于绘制SVG折线。所谓折线就是多条衔接的直线。看下面的例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

上面代码的返回结果如下:

折线由多个点来定义。每一个点都有xy属性。上面的例子中有三个点,它们组成了一个三角形。这3个点被直线连接,并被填充。默认的填充颜色是黑色。下面的例子中使用其它颜色来进行填充。

<svg xmlns="http://www.w3.org/2000/svg">  
  <polyline points="10,2  60,2  35,52"
        style="stroke:#006600; stroke-width: 2;
               fill: #33cc33;"/>
</svg>

你会发现上面的三角形只有两条边被填充了描边色,原因是只有两点之间的线会被使用描边色绘制出来。上面的代码中没有一个点指向起点。如果需要三条边都被绘制出来,还需要一个点来指向起点位置。

<svg xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,2  60,2  35,52  10,2"
        style="stroke:#006600; fill: #33cc33;"/>
</svg>

和SVG直线一样,可以使用style属性来为折线设置颜色和描边宽度。

SVG多边形

<polygon>元素用于绘制SVG多边形。多边形是指三条或三条边以上的几何图形。看下面的SVG三角形的例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <polygon points="10,0  60,0  35,50"
         style="stroke:#660000; fill:#cc3333;"/> 
</svg>

使用<polygon>元素,虽然只有三个点,但是你会发现三条边都会被绘制出来。这是因为<polygon>元素会绘制各个点之间的所有直线,包括最后一个点指向第一个点的直线。这是<polygon>元素和code><polyline>元素的唯一不同之处。

我们可以绘制更多条边的几何图形,下面是一个八边形的例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,5   100,5  125,30  125,80 100,105
                   50,105  25,80  25, 30"
          style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
</svg>
返回SVG教程目录

相关阅读:

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1473523200984.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

  • a235

    Windows11现在还不敢装吧,貌似需要等待很多软件测试,不然装了,就怕不兼容。...

  • Web前端之家

    GoogleAdSense可以的,可以加群主,帮你搞定这事情~~...

  • s121

    GoogleAdSense好弄吗,想弄一个账号。...

  • s121

    不错,正好用到,收藏了!...

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria