学习笔记——SVG.js中基本方法——SVG、addTo、size

SVG(params?)

SVG方法中参数是可以选择的

有参数(第一个参数是CSS选择器或者dom元素)

参数可以是CSS选择器或者dom元素。意思是:找到一个满足CSS选择器或者dom元素的svg标签。

<svg id="first"></svg>
const First = document.getElementById('first')
let draw = SVG(First)
// 等价于
let draw = SVG('#first')

有参数(第一个参数是标签,第二个参数可选)

<svg id="first"></svg>
let rect = SVG('<rect width="20" height="20">').addTo('#first')

要在HTML命名空间中创建元素,请将true作为第二个参数传递给SVG():

let rect2 = SVG('<rect width="20" height="20" x="10" y="50">', true).addTo('#first')

无参数

表示创建了一个现阶段不可见的svg标签。需要使用addTo方法将其加入到html中,才会生成一个新的svg标签。

let draw = SVG()
console.log(draw) // Svg { node: svg, type: 'svg', dom: {} }

addTo()、add()

将调用元素设置为参数的子节点。返回子级:

// group是找到的g标签或者svg.js中group()方法创建的
rect.addTo(group) //-> returns rect
rect.addTo('#someEl')
rect.addTo(document.body, 0) // 0表示为第一个子节点

// 这一个参数的使用,我试试了,没找到正确的用法。
rect.addTo('<g>')

addTo()接受指定位置的第二个参数,第二个参数表示调用元素的位置。

size()

将元素的大小设置为给定的宽度和高度:

rect.size(200, 300)

通过省略高度,也可以按比例调整大小:

rect.size(200)

或者通过传递null作为宽度值:

rect.size(null, 200)

与定位一样,可以使用attr()设置元素的大小。但由于每种类型的元素都不同地处理其大小,因此size()方法要方便得多。

width()、height()

// 也可以使用width和height方法直接设置宽高
let svg4 = SVG().width(100).height(100).addTo('#app')

// width()和height()方法没有参数时,表示获取容器的宽高
console.log(svg4.width()) // 100

视频讲解

猜你喜欢

转载自blog.csdn.net/qq_41339126/article/details/130559029
SVG