SVG.js 元素操作整理

Posted 2020-09-08 天马3798

一、属性操作Attributes

var draw = SVG(\'svg1\').size(300, 300);
//attr() 属性操作
//设置属性的值
var rect = draw.rect(100, 100);
rect.attr(\'x\', 50).attr(\'y\', 50);
rect.attr({
    fill: \'#f06\',
    \'fill-opacity\': 0.5,
    stroke: \'#000\',
    \'stroke-width\': 10
});
//删除属性
rect.attr(\'fill\', null);
//获取属性的值
var x = rect.attr(\'x\');
console.info(x);
var attributes = rect.attr();
console.info(attributes);

属性内容如下：

二、位置操作Positioning

var draw = SVG(\'svg1\').size(300, 300);
//Positioning 位置操作
var rect = draw.rect(100, 100);
var circle = draw.circle(100, 100).fill(\'#f06\');
//1.使用attr()设置位置
rect.attr({ x: 50, y: 50 });
circle.attr({ cx: 100, cy: 150 });
//2.使用 x()/y() cx()/cy() dx()/dy() 获取或设置位置
//x()/y()   x轴、y轴相对父节点获取或设置位置
//cx()/cy() x轴、y轴获取或移动中心
//dx()/dy() x轴、y轴相对于当前位置的移动
rect.x(50).y(50);
rect.cx(50).cy(50);
circle.cx(100).cy(100);
rect.dx(50).dy(50);

//3.move()/dmove() ---推荐使用的方式,如果仅指定一个值，则只是在x轴方向移动
circle.dmove(100, 100); //相对当前位置,目前的位置上再次移动
circle.move(100, 100);//相对父节点左上角

//4.center() 设置圆心的位置
//circle.center(100,100);
console.info(circle.x());
console.info(circle.cx());

三、大小操作Resizing

var draw = SVG(\'svg1\').size(300, 300);
//Resizeing 获取或设置元素大小
var rect = draw.rect(100, 100).fill(\'#f07\');
var circle = draw.circle(100);
//1.size() 设置大小
rect.size(200); //指定一个值，则宽度和高度相同
rect.size(200, 100);
//2.width() 获取或设置宽度
console.info(rect.width());
rect.width(200);
//3.height() 获取或设置高度
console.info(rect.height());
rect.height(200);

//4.raduis() 获取或设置圆角
//circle.radius(50); //设置半径
circle.radius(30, 50); //设置半径,对于圆，只使用第一个参数，对于椭圆可以设置两个参数
rect.radius(20); //设置圆角

四、填充、描边、透明度操作 Syntatic

var draw = SVG(\'svg1\').size(300, 300);
//Syntactic sugar 填充，描边、透明度
var rect = draw.rect(100, 100);
//-----fill() 填充
// //指定填充颜色和透明度
rect.fill({color:\'#f06\',opacity:0.6});
// //指定填充颜色
rect.fill(\'red\');
// //指定填充背景图
rect.fill(\'../scripts/36.jpg\');
// //指定背景图片大小
rect.fill(draw.image(\'../scripts/36.jpg\', 30, 30));

//-----stroke() 描边
rect.move(100, 100);
//使用json对象，指定颜色，宽度，透明度
rect.stroke({ color: \'#f06\', opacity: 0.6, width: 20 });
//指定边框颜色
rect.stroke(\'yellow\');
// 指定边框背景图片
rect.stroke(\'../scripts/tool.png\');
// 指定边框图片大小
rect.stroke(draw.image(\'../Scripts/tool.png\', 20, 20));

//-----opacity() 透明度设置
rect.opacity(0.5);

更多：

SVG.js 引用获取整理

SVG.js Marker标记和自定义标签

SVG.js Mask覆盖和ClipPath裁剪