这篇文章需要技术复核。如何帮忙。
我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
« SVG Attribute reference home
This attribute lets the author specify a total length for the path, in whatever units the author chooses. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength
/ (computed value of path length).
This can affect the actual rendered lengths of paths, including text paths, animation paths, and various stroke operations.
Usage context
Categories | None |
---|---|
Value | <number> |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition): pathLength attribute |
- <number>
-
Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:
number ::= integer | [+-]? [0-9]* "." [0-9]+
This syntax is the same as the definition in CSS (CSS2, section 4.3.1).
When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
number ::= integer ([Ee] integer)? | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
Within the SVG DOM, a <number> is represented as a float,
SVGNumber
or aSVGAnimatedNumber
.
Example
Source code | Output result |
---|---|
Unable to find file pathLength.svg |
Unable to find file pathLength.svg |
The primary thing to note here is that this example is using pathLength
to tell the SVG renderer that the path is 200 units long, even though it's only 100 CSS pixels long. This, in combination with the 100-pixel on/100-pixel off dash stroke leads the stroke to appear to use only half the length of the real path.
Elements
The following elements can use the pathLength
attribute:
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | 6.0 (6.0) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 6.0 (6.0) | ? | ? | ? |