使用 SVGPath 来调节设计模式下画的 SVG 路径的 fillstrokeStartstrokeEnd 等属性,并给它添加动画。

Use SVGPath to modify and animate SVG paths targeted from Design. Set fill, strokeStart, strokeEnd and more.

在代码模式中不能创建 SVGPath ,我们一般使用 SVGLayer 并通过获取它的 elements 属性来获取 SVGPath 。

An SVGPath should not be created in code. The only way to get an SVGPath is through the elements property of SVGLayer

svg = new SVGLayer
    svg: "<svg><path id='shape' name='Rectangle' d='M0 0 H 150 V 75 H 0 L 0 0' />"
    fill: "#0AF"
path = svg.elements.shape

图层可以沿着一个 SVG 路径运动,下面的例子演示了一个图层沿着一个 SVG 路径的位置和角度运动。

Layers can also be animated along a path, in combination with the point and rotation property, for example.

layer = new Layer
    size: 100
layer.midPoint = path.start
    point: path
    rotation: path
# Shorthand for doing all of the above steps  
    path: path

path.length <number>


The length of the path. (Read-only)

print path.length
# Output: 450 

path.width <number>


The width of the path. (Read-only)

print path.width
# Output: 150 

path.height <number>

路径高度。(只读) The height of the path. (Read-only)

print path.height
# Output: 75 



Returns the location and rotation of the start of the path. Pass a layer as final argument to get the coordinates for that layer. If no layer is passed, the coordinates will be for the current context.

print path.start()
# {x:0, y:0, rotation:90}  
# Shorthand to set the location of a layer to the start of the path  
layer.point = path.start



Returns the location and rotation of the end of the path. Pass a layer as final argument to get the coordinates in that layer. If no layer is passed, the coordinates will be for the current context.

print path.end()
# {x:0, y:0, rotation:0}  
# Shorthand to set the location of a layer to the end of the path  
layer.point = path.end


获取路径对应比例( 0 到 1 )长度处的坐标,该坐标是相对于这个路径的。

Get the location of a point along a fraction (value from 0 to 1) of the path, relative to the position of the path.

point = path.pointAtFraction(0.5)
print point.xpoint.y
# Output: 150, 75 

path.rotationAtFraction(fraction, delta)

路径线条对应比例( 0 到 1 )处的角度,另一个可选参数是计算角度的偏差。

Get the angle of the line at a fraction (value from 0 to 1) of the path. The optional second argument is the offset used to calculate the angle.

print path.rotationAtFraction(0.5)
# Output: -90 

path.fill <string>


Sets the fill color of the path.

path.fill = "#FFF"

path.stroke <string>


Sets the stroke color of the path.

path.stroke = "#0AF"

path.strokeWidth <number>


Sets the stroke width of the path.

path.strokeWidth = 10

path.strokeStart <number>


Set the start position of where to draw the stroke on the path.

# Only stroke the last half of the path  
path.strokeStart = path.length / 2

path.strokeEnd <number>


Set the end position of where to stop drawing the stroke on the path.

# Only stroke the first half of the path  
path.strokeEnd = path.length / 2

path.strokeLength <number>


Set the length of the stroke of the path.

path.strokeLength = 200

path.strokeFraction <number>

设置路径的描边长度比例,是 strokeLength 的一种简写。

Set the stroke length to a fraction of the total length of the path. Shorthand for strokeLength.

# Set the stroke length to half of the total length  
# Same as path.strokeLength = path.length / 2  
path.strokeFraction = 0.5

path.strokeLinecap <string>


Set the line-cap of the stroke.

你可以选择 buttroundsquare 中的一个。

You can choose between butt, round and square.

# Multiple types of line caps  
shape.strokeLinecap = "butt"
shape.strokeLinecap = "round"
shape.strokeLinecap = "square"

path.strokeLinejoin <string>


Set the line-join of the stroke.

你可以选择 miterroundbevel 中的一个。

You can choose between miter, round and bevel.

# Multiple types of line joins  
shape.strokeLinejoin = "miter"
shape.strokeLinejoin = "round"
shape.strokeLinejoin = "bevel"

path.strokeMiterlimit <number>

设置斜切限制,只在 strokeLinejoinmiter 时起作用。

Set the miter limit of the stroke. Only works when strokeLinejoin is set to miter.

star.strokeMiterlimit = 1

path.strokeOpacity <number>

设置描边不透明度,它的值是从 0 到 1 ,0 表示不可见,1 表示完全可见。

Sets the stroke opacity. Opacity is defined with a number between 0 and 1, where 0 is invisible and 1 fully opaque.

path.opacity = 0.5

path.strokeDasharray <array>

给描边设置更加精细的虚线图案,可以看MDN 的示例了解更多细节。

Sets the stroke to have a certain pattern. See MDN’s examples for more details.

path.strokeDasharray = [551010]

path.strokeDashoffset <number>


The offset of the dash-pattern set by strokeDasharray. Useful for animating a dashed pattern.

path.stroke = "#000"
path.strokeDasharray = [1010]
    strokeDashoffset: path.length