非常教程

SVG参考手册

属性 | Attributes

pathlength

该属性让作者以用户单位指定路径的总长度。然后使用该值通过使用比率pathLength/(路径长度的计算值)缩放所有距离计算来校准浏览器与作者的距离计算。

这会影响路径的实际渲染长度; 包括文本路径,动画路径和各种笔画操作。基本上,所有的计算都需要路径的长度。例如,stroke-dasharray将假设路径的开始是0,结束点是在pathLength属性中定义的值。

用法说明

分类

没有

<数字>

动画

规范性文件

SVG 1.1(第二版):pathLength属性

例子

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <path pathLength="100" stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 0,0 100,100 -50,-75 0,50 z"/>
  <path stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 100,0 100,100 -50,-75 0,50 z"/>
</svg>

Screenshot

Live sample

左边的路径将其pathLength设置为100,使得stroke-dasharray有效覆盖路径的90%,而不是像右侧路径那样仅有90个用户单元。

元素

以下元素可以使用该pathLength属性:

  • <path>

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

6.0 (6.0)

No support

(Yes)

No support

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

6.0 (6.0)

?

?

?

属性 | Attributes相关

1.accent-height(焦点高度)
2.accumulate(积累)
3.additive
4.alignment-baseline(对齐基线)
5.ascent
6.attributename(属性名字)
7.Attributes(属性)
8.attributetype(属性类型)
9.azimuth(方位)
10.basefrequency
11.baseline-shift(基线漂移)
12.baseprofile
13.begin(开始)
14.bias(偏压)
15.calcmode
16.class
17.clip(剪辑)
18.clip-path(剪辑路径)
19.clip-rule(剪辑规则)
20.clippathunits
21.color(颜色)
22.color-interpolation(彩色插值)
23.color-interpolation-filters(色彩插值滤波器)
24.color-profile(彩色轮廓)
25.color-rendering(显色)
26.contentscripttype
27.contentstyletype
28.cursor(光标)
29.cx
30.cy
31.d
32.diffuseconstant
33.direction(方向)
34.display(显示)
35.divisor
36.dominant-baseline(显性基线)
37.dur
38.dx
39.dy
40.edgemode
41.elevation
42.end
43.externalresourcesrequired
44.fill
45.fill-opacity
46.fill-rule
47.filter
48.filterres
49.filterunits
50.flood-color
51.flood-opacity
52.font-family
53.font-size
54.font-size-adjust
55.font-stretch
56.font-style
57.font-variant
58.font-weight
59.fr
60.from
61.fx
62.fy
63.gradienttransform
64.gradientunits
65.height
66.href
67.image-rendering
68.in
69.in2
70.k1
71.k2
72.k3
73.k4
74.kernelmatrix
75.kernelunitlength
76.kerning
77.keysplines
78.keytimes
79.lengthadjust
80.letter-spacing
81.lighting-color
82.limitingconeangle
83.local
84.marker-end
85.marker-mid
86.marker-start
87.markerheight
88.markerunits
89.markerwidth
90.mask
91.maskcontentunits
92.maskunits
93.max
94.min
95.mode
96.numoctaves
97.opacity
98.operator
99.order
100.overflow
SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。