web 前端绘制折线_SVG基础 | 绘制SVG直线、折线和多边形

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

db1403a7271fecbc7ad29a4fdcd203e2.png

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

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

SVG折线

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

style="stroke:#006600;"/>

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

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

style="stroke:#006600; stroke-width: 2;

fill: #33cc33;"/>

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

style="stroke:#006600; fill: #33cc33;"/>

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

SVG多边形

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

style="stroke:#660000; fill:#cc3333;"/>

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

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

50,105  25,80  25, 30"

style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

相关阅读:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值