pathLength

此文件需要編輯審查。看看您能幫什麼忙。

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 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, like 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

Example

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

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.

Elements

The following elements can use the pathLength attribute:

Browser compatibility

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

 

文件標籤與貢獻者

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