SVG(params?)
Parameters in SVG methods are optional
Has parameters (the first parameter is a CSS selector or a dom element)
Parameters can be CSS selectors or DOM elements. Meaning: Find an svg tag that satisfies a CSS selector or dom element.
<svg id="first"></svg>
const First = document.getElementById('first')
let draw = SVG(First)
// 等价于
let draw = SVG('#first')
Has parameters (the first parameter is the label, the second parameter is optional)
<svg id="first"></svg>
let rect = SVG('<rect width="20" height="20">').addTo('#first')
To create elements in HTML namespaces, pass true as the second argument to svg():
let rect2 = SVG('<rect width="20" height="20" x="10" y="50">', true).addTo('#first')
no parameters
Indicates that an svg tag that is currently invisible has been created. You need to use the addTo method to add it to the html to generate a new svg tag.
let draw = SVG()
console.log(draw) // Svg { node: svg, type: 'svg', dom: {} }
addTo()、add()
Set the calling element as a child node of the parameter. Return children:
// group是找到的g标签或者svg.js中group()方法创建的
rect.addTo(group) //-> returns rect
rect.addTo('#someEl')
rect.addTo(document.body, 0) // 0表示为第一个子节点
// 这一个参数的使用，我试试了，没找到正确的用法。
rect.addTo('<g>')
addTo() accepts a second parameter specifying the position, the second parameter indicates the position of the calling element.
size()
Set the size of an element to a given width and height:
rect.size(200, 300)
Proportional resizing is also possible by omitting the height:
rect.size(200)
or by passing null as the width value:
rect.size(null, 200)
As with positioning, elements can be sized using attr(). But since each type of element handles its size differently, the size() method is much more convenient.
width()、height()
// 也可以使用width和height方法直接设置宽高
let svg4 = SVG().width(100).height(100).addTo('#app')
// width()和height()方法没有参数时，表示获取容器的宽高
console.log(svg4.width()) // 100