We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

« SVG Attribute reference home

This attribute lets the author specify a total length for the path, in user units. 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. Basically, all computations that require the length of the path. stroke-dasharray, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.

Usage context

Categories None
Value <number>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): pathLength attribute


<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"/>

ScreenshotLive sample

The path on the left has its pathLength set to 100, making the stroke-dasharray effectively cover 90% of the path, instead of only 90 user units like the path on the right.


The following elements can use the pathLength attribute:

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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) ? ? ?



此頁面的貢獻者: bunnybooboo, DGruenwald, kscarfone, Jeremie, Sheppy
最近更新: bunnybooboo,