html svg居中stretch,使用svg.js时,关于svg元素的集中对齐方式

svg.js 的set可以操作每个set组合里面的子元素

setGroupAlign (type) {

let box = this.group.set.bbox();

let last = this.draw.last();

// console.log(box)

switch(type){

case 'left':

//    保持左对齐

this.group.set.x(box.x)

break;

case 'right':

// 右对齐会有元素偏移出去,

this.group.set.members.forEach(g =>{

let width = g.bbox().width

// 移动的时候需要减去当前元素的宽度

g.x(box.x2-width)

})

break;

case 'center':

// 统一set里面的中心点,居中对齐

this.group.set.cx(box.cx, box.cy)

break;

case 'middle':

this.group.set.cy(box.cy, box.cy)

break;

case 'top':

this.group.set.y(box.y)

break;

case 'bottom':

//同右对齐一样的原理

this.group.set.members.forEach(g =>{

let width = g.bbox().height

g.y(box.x2-width)

})

break;

}