Study notes - position-related methods such as attr and move in SVG.js

Attributes

1）attr() as setter

To set a single property:

rect.attr('x', 50)

To set multiple properties at once:

rect.attr({
    
    
  fill: '#f06'
, 'fill-opacity': 0.5
, stroke: '#000'
, 'stroke-width': 10
})

Set properties using namespaces:

rect.attr('x', 50, 'http://www.w3.org/2000/svg')

Explicitly remove attributes:

rect.attr('fill', null)

2）attr() as getter

Attributes of an element can be directly obtained and set using attr().
Get a single attribute:

var x = rect.attr('x')

Get all properties as an object:

var attributes = rect.attr()

Get only the specified properties:

var attributes = rect.attr(['x', 'y'])

Positioning

While locating an element by directly setting an element's attribute only works if that type of element uses the attribute natively, the locating methods described below are more convenient because they work for all element types.
For example, the following code works because each element is positioned by setting a native property:

rect.attr({
    
     x: 20, y: 60 })
circle.attr({
    
     cx: 50, cy: 40 })

The rectangle will be moved by its upper left corner to the new coordinates, and the circle will be moved by its center. However, trying to move a circle by its "corners" or a rectangle by its center in this way will fail. The following lines are ignored because the element on which they are set does not natively use the addressed attribute:

rect.attr({
    
     cx: 20, cy: 60 })
circle.attr({
    
     x: 50, y: 40 })

However, the locating methods detailed below will work with all element types, regardless of whether the property being addressed is native to that type. So, unlike the lines above, these work just fine:

rect.cx(20).cy(60)
circle.x(50).y(40)

However, it is important to note that these methods only work with user (unitless) coordinates. For example, if an element sets its size via percentages or other units, positioning methods that deal with its native properties will likely still work, but methods that deal with non-native properties will have unexpected results - as getters and setters!

1）move()

Move the element's top-left corner to the given x and y position:

rect.move(200, 350)

2）x() / y() as setter

Move only the top left corner of an element along the x/y axis:

rect.x(200)
rect.y(200)

3）x() / y() as getter

With no arguments, the x()/y() methods act as getters:

var x = rect.x(200)
var y = rect.y(200)

4）center()

Move the center of the element to the given cx and cy position:

rect.center(150, 150)

5）cx() / cy() as setter

Move only the center of the element along the x/y direction:

rect.cx(200)
rect.cy(200)

6）cx() / cy() as getter

With no arguments, the cx()/cy() methods act as getters:

var cx = rect.cx()
var cy = rect.cy()

7）dmove()

Move an element in the x and y directions relative to its current position:

rect.dmove(10, 30)

NOTE: When using dmove() (as well as dx() or dy(), always make sure to provide a value in the same unit that the element was originally in. So if the element is at x:10%, use element.dx('5% '), instead of element.dx'('5px').

8）dx() / dy()

Move an element in x/y direction relative to its current position:

rect.dx(200)
rect.dy(200)

Video explanation

Video explanation