SVG(¿parámetros?)
Los parámetros en los métodos SVG son opcionales.
Tiene parámetros (el primer parámetro es un selector CSS o un elemento dom)
Los parámetros pueden ser selectores CSS o elementos DOM. Significado: busque una etiqueta svg que satisfaga un selector CSS o un elemento dom.
<svg id="first"></svg>
const First = document.getElementById('first')
let draw = SVG(First)
// 等价于
let draw = SVG('#first')
Tiene parámetros (el primer parámetro es la etiqueta, el segundo parámetro es opcional)
<svg id="first"></svg>
let rect = SVG('<rect width="20" height="20">').addTo('#first')
Para crear elementos en espacios de nombres HTML, pase verdadero como segundo argumento de svg():
let rect2 = SVG('<rect width="20" height="20" x="10" y="50">', true).addTo('#first')
sin parámetros
Indica que se ha creado una etiqueta svg que actualmente es invisible. Debe utilizar el método addTo para agregarlo al html y generar una nueva etiqueta svg.
let draw = SVG()
console.log(draw) // Svg { node: svg, type: 'svg', dom: {} }
agregarA()、añadir()
Establezca el elemento de llamada como un nodo secundario del parámetro. Niños que regresan:
// group是找到的g标签或者svg.js中group()方法创建的
rect.addTo(group) //-> returns rect
rect.addTo('#someEl')
rect.addTo(document.body, 0) // 0表示为第一个子节点
// 这一个参数的使用，我试试了，没找到正确的用法。
rect.addTo('<g>')
addTo() acepta un segundo parámetro que especifica la posición, el segundo parámetro indica la posición del elemento que llama.
tamaño()
Establezca el tamaño de un elemento a un ancho y alto determinados:
rect.size(200, 300)
También es posible cambiar el tamaño proporcionalmente omitiendo la altura:
rect.size(200)
o pasando null como valor de ancho:
rect.size(null, 200)
Al igual que con el posicionamiento, se puede dimensionar un elemento usando attr(). Pero como cada tipo de elemento maneja su tamaño de manera diferente, el método size() es mucho más conveniente.
ancho()、alto()
// 也可以使用width和height方法直接设置宽高
let svg4 = SVG().width(100).height(100).addTo('#app')
// width()和height()方法没有参数时，表示获取容器的宽高
console.log(svg4.width()) // 100