学习笔记——SVG.js中的attr和move等位置相关方法

Attributes

1）attr() as setter

设置单个属性：

rect.attr('x', 50)

一次设置多个属性：

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

使用命名空间设置属性：

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

显式删除属性：

rect.attr('fill', null)

2）attr() as getter

可以使用attr（）直接获取和设置元素的属性。
获取单个属性：

var x = rect.attr('x')

将所有属性作为对象获取：

var attributes = rect.attr()

仅获取指定的属性：

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

Positioning

虽然通过直接设置元素的属性来定位元素仅在该类型的元素原生使用属性时有效，但下面描述的定位方法更方便，因为它们适用于所有元素类型。
例如，以下代码有效，因为每个元素都是通过设置原生属性来定位的：

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

矩形将通过其左上角移动到新坐标，圆形将通过其中心移动。然而，试图以这种方式通过其“角”移动圆或通过其中心移动矩形将失败。以下行将被忽略，因为设置它们的元素不会本机使用寻址的属性：

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

但是，下面详细介绍的定位方法将适用于所有元素类型，无论要寻址的属性是否是该类型的原生属性。因此，与上面的线条不同，这些线条工作得很好：

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

但是，需要注意的是，这些方法仅适用于用户（无单位）坐标。例如，如果一个元素通过百分比或其他单位设置其大小，那么处理其原生属性的定位方法很可能仍然有效，但处理非原生属性的方法将产生意想不到的结果——作为getter和setter！

1）move()

将元素左上角移动到给定的x和y位置：

rect.move(200, 350)

2）x() / y() as setter

仅沿x/y轴移动元素的左上角：

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

3）x() / y() as getter

如果没有参数，x（） / y()方法充当getter：

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

4）center()

将元素的中心移动到给定的cx和cy位置：

rect.center(150, 150)

5）cx() / cy() as setter

仅沿x/y方向移动元素的中心：

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

6）cx() / cy() as getter

如果没有参数，cx（）/ cy()方法充当getter：

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

7）dmove()

相对于当前位置在x和y方向上移动元素：

rect.dmove(10, 30)

注意：当使用dmove（）（以及dx（）或dy（）时，请始终确保提供元素最初所在的相同单位的值。因此，如果元素位于x:10%，请使用element.dx（‘5%’），而不是element.dx’（‘5px’）。

8）dx() / dy()

相对于当前位置在x/y方向上移动元素：

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

视频讲解

视频讲解