diff options
Diffstat (limited to 'files/zh-cn/web/svg/attribute/pathlength/index.html')
| -rw-r--r-- | files/zh-cn/web/svg/attribute/pathlength/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.html b/files/zh-cn/web/svg/attribute/pathlength/index.html new file mode 100644 index 0000000000..0d0ad395a0 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pathlength/index.html @@ -0,0 +1,219 @@ +--- +title: pathLength +slug: Web/SVG/Attribute/pathLength +translation_of: Web/SVG/Attribute/pathLength +--- +<div> +<p>{{SVGRef}}</p> + +<p>The <strong><code>pathLength</code></strong> attribute lets authors 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 <code>pathLength</code>/(<em>computed value of path length</em>).</p> + +<p>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. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the <code>pathLength</code> attribute.</p> + +<p>Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}</p> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> + <style> + path { + fill: none; + stroke: black; + stroke-width: 2; + stroke-dasharray: 10; + } + </style> + + <!-- No pathLength, the real length of the path is used. In that case, 100 user units --> + <path d="M 0,10 h100"/> + + <!-- compute everything like if the path length was 90 user units long --> + <path d="M 0,20 h100" pathLength="90"/> + + <!-- compute everything like if the path length was 50 user units long --> + <path d="M 0,30 h100" pathLength="50"/> + + <!-- compute everything like if the path length was 30 user units long --> + <path d="M 0,40 h100" pathLength="30"/> + + <!-- compute everything like if the path length was 10 user units long --> + <path d="M 0,50 h100" pathLength="10"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the circle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="ellipse">ellipse</h2> + +<p>For {{SVGElement('ellipse')}}, <code>pathLength</code> lets authors specify a total length for the ellipse, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="line">line</h2> + +<p>For {{SVGElement('line')}}, <code>pathLength</code> lets authors specify a total length for the line, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="path">path</h2> + +<p>For {{SVGElement('path')}}, <code>pathLength</code> lets authors specify a total length for the path, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polygon">polygon</h2> + +<p>For {{SVGElement('polygon')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polyline">polyline</h2> + +<p>For {{SVGElement('polyline')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="rect">rect</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the rectangle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> |