SVG Shapes之折线 <polyline>

简介:

6.折线 <polyline>

示例6.1

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

示例6.2

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>


目录
相关文章
|
前端开发 关系型数据库 容器
利用Canvas进行绘制XY坐标系
原文:利用Canvas进行绘制XY坐标系 首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所以XY的Canvas要以(RenderTransf...
1747 0
|
7月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
80 3
|
算法 前端开发 数据可视化
深入 Canvas/SVG 的布尔运算(Martinez 法)
深入 Canvas/SVG 的布尔运算(Martinez 法)
245 0
|
前端开发
canvas绘制五角星
canvas绘制五角星
193 0
transform: translateY(-50%)实现垂直居中效果
transform: translateY(-50%)实现垂直居中效果
156 0
transform: translateY(-50%)实现垂直居中效果
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
150 0
CSS绘图实现三角形并使用grid布局
|
缓存 定位技术
解决Leaflet.draw中polyline绘制无法结束的问题
通过本文,可以了解如何自定义Draw.PolyLine对象,以及在扩展时需要注意的一些坑,知道如何调试函数并定位问题,最终完成需求。
359 0
解决Leaflet.draw中polyline绘制无法结束的问题
|
XML 数据格式 JavaScript
|
前端开发 JavaScript 容器
第165天:canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1、HTML 注意引入Konva.js库 1 DOCTYPE html> 2 3 4 5 使用Konva绘制圆环旋转动画 6 7 8 9 10 11 12 13 14 15 //创建舞台 16 var stage=new Konva.
2082 0