SVG学习笔记

svg学习笔记

1、svg基本操作API

1、创建图形
document.createElementNS(ns, tagName)
2、添加图形
element.appendChild(childElement)
3、 设置/获取属性
element.setAttribute(name, value)
elememt.getAttribute(name)

注意：角度的顺时针方向为正方向。

2、颜色、渐变和笔刷

2-1、rgb 和 HSL

hsl(h, s%, l%) (示颜色、饱和度和亮度)(h: [0, 359] s, l: [0, 100])

3、viewBox

3-1、viewBox参数

viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

 //实例：
 <svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #234567;">
     <rect x="20" y="10" width="10" height="5"
           style="stroke: #000000; fill:none;"