SVG.js 元素操作整理（一）

一、屬性操作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裁剪