学习笔记——SVG.js中的use和marker元素的相关方法

Use()

use()

use元素只是模拟另一个现有元素。主元素上的任何更改都将反映在所有使用实例上。use（）的用法非常简单：

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

在上述示例的情况下，svg绘图中将显示两个矩形，即原始矩形和使用实例矩形。在某些情况下，可能需要隐藏原始元素。最好的方法是在defs节点中创建原始元素：

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

这样，rect元素充当库元素。您可以编辑它，但它不会被渲染。
另一种方法是指向外部SVG文件，只需指定元素id和文件路径。

var use  = draw.use('elementId', 'path/to/file.svg')

当您已经创建了复杂的图像时，这种方法非常有用。
注意，对于外部图像（在您的域之外），可能需要使用XHR加载文件。

Marker()

1）marker()

可以将marker添加到直线、多段线、多边形和路径的每个单独点。有三种类型的标记：start、mid和end。如果start代表第一个点，则end是最后一个点和mid是中间点。

var path = draw.path('M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100')

path.fill('none').move(20, 20).stroke({
    
     width: 1, color: '#ccc' })

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
    
    
  add.rect(5, 10).cx(5).fill('#ccc')
})
path.marker('end', 20, 20, function(add) {
    
    
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(12, 10)

  this.fill('#0f9')
})

marker（）方法有三种用法。首先，可以在任何容器元素（例如svg、nested、group…）上创建marker。如果您计划多次重用marker，这很有用，因此它将在defs中创建marker，但尚未显示：

var marker = draw.marker(10, 10, function(add) {
    
    
  add.rect(10, 10)
})

其次，可以创建marker并直接应用于其目标元素：

path.marker('start', 10, 10, function(add) {
    
    
  add.circle(10).fill('#f06')
})

这将在def中创建marker并直接应用它。注意，第一个参数定义了marker的位置，并且有四个参数，而第一个示例中有三个参数。

最后，如果在容器元素上创建marker以供重用，则可以将其直接应用于目标元素：

path.marker('mid', marker)

最后，要从目标元素引用中获取marker实例：

path.reference('marker-end')

2）marker.height()/width()

定义marker的高度/宽度：

marker.height(10)
marker.width(10)

3）marker.ref()

默认情况下，marker的refX和refY属性分别设置为宽度和高度值的一半。要不同地定义marker的refX和refY，请执行以下操作：

marker.ref(2, 7)

4）marker.size()

定义marker宽度和marker高度属性：

marker.size(10, 10)

5）marker.update()

更新marker的内容，将清除marker元素现有内容，并添加一个函数作为第一个参数：

marker.update(function(add) {
    
    
  add.circle(10)
})

6）marker.orient()

定义orient(朝向)属性：

marker.orient(50)

视频讲解

视频讲解