diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/svgpathelement/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/svgpathelement/index.html')
-rw-r--r-- | files/zh-cn/web/api/svgpathelement/index.html | 478 |
1 files changed, 478 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/svgpathelement/index.html b/files/zh-cn/web/api/svgpathelement/index.html new file mode 100644 index 0000000000..0a83545951 --- /dev/null +++ b/files/zh-cn/web/api/svgpathelement/index.html @@ -0,0 +1,478 @@ +--- +title: SVGPathElement +slug: Web/API/SVGPathElement +tags: + - API + - SVG + - SVG DOM + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/API/SVGPathElement +--- +<div>{{APIRef("SVG")}}</div> + +<h2 id="SVG_path_interface">SVG path interface</h2> + +<p><code>SVGPathElement</code>接口对应于{{ SVGElement("path") }}元素。</p> + +<h3 id="接口概览">接口概览</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">又作用于</th> + <td>{{ domxref("SVGElement") }}、 {{ domxref("SVGTests") }}、 {{ domxref("SVGLangSpace") }}、 {{ domxref("SVGExternalResourcesRequired") }}、 {{ domxref("SVGStylable") }}、 {{ domxref("SVGTransformable") }}、 {{ domxref("SVGAnimatedPathData") }}</td> + </tr> + <tr> + <th scope="row">方法</th> + <td> + <ul> + <li><code>float getTotalLength()</code></li> + <li><code>{{ domxref("SVGPoint") }} getPointAtLength(in float distance)</code></li> + <li><code>unsigned long getPathSegAtLength(in float distance)</code></li> + <li><code>{{ domxref("SVGPathSegClosePath") }} createSVGPathSegClosePath()</code></li> + <li><code>{{ domxref("SVGPathSegMovetoAbs") }} createSVGPathSegMovetoAbs(in float x, in float y)</code></li> + <li><code>{{ domxref("SVGPathSegMovetoRel") }} createSVGPathSegMovetoRel(in float x, in float y)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoAbs") }} createSVGPathSegLinetoAbs(in float x, in float y)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoRel") }} createSVGPathSegLinetoRel(in float x, in float y)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoCubicAbs") }} createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoCubicRel") }} createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoQuadraticAbs") }} createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoQuadraticRel") }} createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)</code></li> + <li><code>{{ domxref("SVGPathSegArcAbs") }} createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)</code></li> + <li><code>{{ domxref("SVGPathSegArcRel") }} createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoHorizontalAbs") }} createSVGPathSegLinetoHorizontalAbs(in float x)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoHorizontalRel") }} createSVGPathSegLinetoHorizontalRel(in float x)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoVerticalAbs") }} createSVGPathSegLinetoVerticalAbs(in float y)</code></li> + <li><code>{{ domxref("SVGPathSegLinetoVerticalRel") }} createSVGPathSegLinetoVerticalRel(in float y)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)</code></li> + <li><code>{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);</code></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">属性</th> + <td> + <ul> + <li>{{ domxref("SVGAnimatedNumber") }} <code>pathLength</code></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGPathElement" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGLength">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>名称</th> + <th>类型</th> + <th>描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>pathLength</code></td> + <td>{{ domxref("SVGAnimatedNumber") }}</td> + <td>对应于给定{{ SVGElement("path") }}元素的{{ SVGAttr("pathLength") }}属性。</td> + </tr> + </tbody> +</table> + +<h2 id="方法">方法</h2> + +<p> </p> + +<table class="standard-table"> + <thead> + <tr> + <th>名称和参数</th> + <th>返回</th> + <th>描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong><code>getTotalLength</code></strong><code>()</code></td> + <td>浮点数</td> + <td>返回用浏览器的 distance-along-a-path 算法计算得出的路径全长,匹配当前用户坐标系中的长度。</td> + </tr> + <tr> + <td><code><strong>getPointAtLength</strong>(in float <em>distance</em>)</code></td> + <td>{{ domxref("SVGPoint") }}</td> + <td>Returns the (x,y) coordinate in user space which is distance units along the path, utilizing the browser's distance-along-a-path algorithm.</td> + </tr> + <tr> + <td><code><strong>getPathSegAtLength</strong>(in float <em>distance</em>)</code></td> + <td>无符号长整型</td> + <td>Returns the index into <code>pathSegList</code> which is <code>distance</code> units along the path, utilizing the user agent's distance-along-a-path algorithm.</td> + </tr> + <tr> + <td><code><strong>createSVGPathSegClosePath</strong>()</code></td> + <td>{{ domxref("SVGPathSegClosePath") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegClosePath") }} object.</td> + </tr> + <tr> + <td><code><strong>createSVGPathSegMovetoAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegMovetoAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegMovetoRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegMovetoRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The relative Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The relative Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoCubicAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoCubicAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicAbs") }} object.<br> + <br> + Parameters: + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The absolute Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x1</em></code><br> + The absolute X coordinate for the first control point.</li> + <li><code>float <em>y1</em></code><br> + The absolute Y coordinate for the first control point.</li> + <li><code>float <em>x2</em></code><br> + The absolute X coordinate for the second control point.</li> + <li><code>float <em>y2</em></code><br> + The absolute Y coordinate for the second control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoCubicRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoCubicRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicRel") }} object.<br> + <br> + Parameters: + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The relative Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x1</em></code><br> + The relative X coordinate for the first control point.</li> + <li><code>float <em>y1</em></code><br> + The relative Y coordinate for the first control point.</li> + <li><code>float <em>x2</em></code><br> + The relative X coordinate for the second control point.</li> + <li><code>float <em>y2</em></code><br> + The relative Y coordinate for the second control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoQuadraticAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoQuadraticAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} object.<br> + <br> + Parameters: + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The absolute Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x1</em></code><br> + The absolute X coordinate for the first control point.</li> + <li><code>float <em>y1</em></code><br> + The absolute Y coordinate for the first control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoQuadraticRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x1</em>, in float <em>y1</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoQuadraticRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticRel") }} object.<br> + <br> + Parameters: + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The relative Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x1</em></code><br> + The relative X coordinate for the first control point.</li> + <li><code>float <em>y1</em></code><br> + The relative Y coordinate for the first control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegArcAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>r1</em>, in float <em>r2</em>, in float <em>angle</em>, in boolean <em>largeArcFlag</em>, in boolean <em>sweepFlag</em>)</code></td> + <td>{{ domxref("SVGPathSegArcAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegArcAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The absolute Y coordinate for the end point of this path segment.</li> + <li><code>float <em>r1</em></code><br> + The x-axis radius for the ellipse.</li> + <li><code>float <em>r2 </em></code><br> + The y-axis radius for the ellipse.</li> + <li><code>float <em>angle </em></code><br> + The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.</li> + <li><code>boolean <em>largeArcFlag </em></code><br> + The value of the large-arc-flag parameter.</li> + <li><code>boolean <em>sweepFlag </em></code><br> + The value of the large-arc-flag parameter.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegArcRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>r1</em>, in float <em>r2</em>, in float <em>angle</em>, in boolean <em>largeArcFlag</em>, in boolean <em>sweepFlag</em>)</code></td> + <td>{{ domxref("SVGPathSegArcRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegArcRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em> </code><br> + The relative Y coordinate for the end point of this path segment.</li> + <li><code>float <em>r1</em></code><br> + The x-axis radius for the ellipse.</li> + <li><code>float <em>r2 </em></code><br> + The y-axis radius for the ellipse.</li> + <li><code>float <em>angle </em></code><br> + The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.</li> + <li><code>boolean <em>largeArcFlag </em></code><br> + The value of the large-arc-flag parameter.</li> + <li><code>boolean <em>sweepFlag </em></code><br> + The value of the large-arc-flag parameter.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoHorizontalAbs</strong>(in float <em>x</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoHorizontalAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoHorizontalRel</strong>(in float <em>x</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoHorizontalRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The relative X coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoVerticalAbs</strong>(in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoVerticalAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>y</em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegLinetoVerticalRel</strong>(in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegLinetoVerticalRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>y</em></code><br> + The relative Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoCubicSmoothAbs</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} object.<br> + <br> + Parameters + <ul> + <li><code>float <em>x </em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y </em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x2 </em></code><br> + The absolute X coordinate for the second control point.</li> + <li><code>float <em>y2 </em></code><br> + The absolute Y coordinate for the second control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoCubicSmoothRel</strong>(in float <em>x</em>, in float <em>y</em>, in float <em>x2</em>, in float <em>y2</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoCubicSmoothRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} object.<br> + <br> + Parameters + <ul> + <li><code>float <em>x </em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y </em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + <li><code>float <em>x2 </em></code><br> + The absolute X coordinate for the second control point.</li> + <li><code>float <em>y2 </em></code><br> + The absolute Y coordinate for the second control point.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoQuadraticSmoothAbs</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + <tr> + <td><code><strong>createSVGPathSegCurvetoQuadraticSmoothRel</strong>(in float <em>x</em>, in float <em>y</em>)</code></td> + <td>{{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }}</td> + <td>Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} object.<br> + <br> + <strong>Parameters:</strong> + <ul> + <li><code>float <em>x</em></code><br> + The absolute X coordinate for the end point of this path segment.</li> + <li><code>float <em>y</em></code><br> + The absolute Y coordinate for the end point of this path segment.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("path") }} SVG Element</li> +</ul> |