[svg 翻译教程]Polyline(折线)polygon(多边形)-阿里云开发者社区

开发者社区> 云计算> 正文

[svg 翻译教程]Polyline(折线)polygon(多边形)

简介: 原文: http://tutorials.jenkov.com/svg/polygon-element.html Polyline 虽然说这个 元素我没用过,但是还是蛮强大的,也翻译下 示例 效果如下 折线是通过定义很多点来定义的,在points...
原文: http://tutorials.jenkov.com/svg/polygon-element.html

Polyline

虽然说这个 元素我没用过,但是还是蛮强大的,也翻译下

示例

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>
效果如下
折线是通过定义很多点来定义的,在points 属性中每个点  都是x,y 这样的形式,这个例子有3个点
折线是通过链接这三个点,然后填充,默认的填充颜色是黑色
看看另外的填充效果
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52"
        style="stroke:#006600; stroke-width: 2;
               fill: #33cc33;"/>
</svg>

效果image

通过对比 我们发现边框的怎么少了一个边?

因为只有两个点之间才会被链接!要绘制闭合的三角形

代码如下

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52  10,2"
        style="stroke:#006600; fill: #33cc33;"/>
</svg>
image

把最后一个点设为和起点一样,就可以看到闭合的三角形了

Polygon

首先看一个多边形示例

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="10,0  60,0  35,50"
         style="stroke:#660000; fill:#cc3333;"/>

</svg>

 

效果如下

image

通过观察代码和效果发现,在points里面只有3个点,但是效果图里面3边都绘制了。

因为polygon 元素在连线的时候,会把所有的点连接起来,包括第一个点和最后一个点。

      polyline 元素是不连接最后一个点和第一个点的。

这好像是polygon和polyline最大的区别

来个更夸张的 示意图 8变形

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <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>
imagetest

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章