From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/svgpathelement/index.html | 478 ++++++++++++++++++++++++++ 1 file changed, 478 insertions(+) create mode 100644 files/zh-cn/web/api/svgpathelement/index.html (limited to 'files/zh-cn/web/api/svgpathelement/index.html') 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 +--- +
{{APIRef("SVG")}}
+ +

SVG path interface

+ +

SVGPathElement接口对应于{{ SVGElement("path") }}元素。

+ +

接口概览

+ + + + + + + + + + + + + + + + + + + + +
又作用于{{ domxref("SVGElement") }}、 {{ domxref("SVGTests") }}、 {{ domxref("SVGLangSpace") }}、 {{ domxref("SVGExternalResourcesRequired") }}、 {{ domxref("SVGStylable") }}、 {{ domxref("SVGTransformable") }}、 {{ domxref("SVGAnimatedPathData") }}
方法 +
    +
  • float getTotalLength()
    • +
  • {{ domxref("SVGPoint") }} getPointAtLength(in float distance)
    • +
  • unsigned long getPathSegAtLength(in float distance)
    • +
  • {{ domxref("SVGPathSegClosePath") }} createSVGPathSegClosePath()
    • +
  • {{ domxref("SVGPathSegMovetoAbs") }} createSVGPathSegMovetoAbs(in float x, in float y)
    • +
  • {{ domxref("SVGPathSegMovetoRel") }} createSVGPathSegMovetoRel(in float x, in float y)
    • +
  • {{ domxref("SVGPathSegLinetoAbs") }} createSVGPathSegLinetoAbs(in float x, in float y)
    • +
  • {{ domxref("SVGPathSegLinetoRel") }} createSVGPathSegLinetoRel(in float x, in float y)
    • +
  • {{ domxref("SVGPathSegCurvetoCubicAbs") }} createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)
    • +
  • {{ domxref("SVGPathSegCurvetoCubicRel") }} createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)
    • +
  • {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)
    • +
  • {{ domxref("SVGPathSegCurvetoQuadraticRel") }} createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)
    • +
  • {{ domxref("SVGPathSegArcAbs") }} createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)
    • +
  • {{ domxref("SVGPathSegArcRel") }} createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)
    • +
  • {{ domxref("SVGPathSegLinetoHorizontalAbs") }} createSVGPathSegLinetoHorizontalAbs(in float x)
    • +
  • {{ domxref("SVGPathSegLinetoHorizontalRel") }} createSVGPathSegLinetoHorizontalRel(in float x)
    • +
  • {{ domxref("SVGPathSegLinetoVerticalAbs") }} createSVGPathSegLinetoVerticalAbs(in float y)
    • +
  • {{ domxref("SVGPathSegLinetoVerticalRel") }} createSVGPathSegLinetoVerticalRel(in float y)
    • +
  • {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)
    • +
  • {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)
    • +
  • {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)
    • +
  • {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);
    • +
+
属性 +
    +
  • {{ domxref("SVGAnimatedNumber") }} pathLength
    • +
+
规范文档SVG 1.1 (2nd Edition)
+ +

属性

+ + + + + + + + + + + + + + + + +
名称类型描述
pathLength{{ domxref("SVGAnimatedNumber") }}对应于给定{{ SVGElement("path") }}元素的{{ SVGAttr("pathLength") }}属性。
+ +

方法

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称和参数返回描述
getTotalLength()浮点数返回用浏览器的 distance-along-a-path 算法计算得出的路径全长，匹配当前用户坐标系中的长度。
getPointAtLength(in float distance){{ domxref("SVGPoint") }}Returns the (x,y) coordinate in user space which is distance units along the path, utilizing the browser's distance-along-a-path algorithm.
getPathSegAtLength(in float distance)无符号长整型Returns the index into pathSegList which is distance units along the path, utilizing the user agent's distance-along-a-path algorithm.
createSVGPathSegClosePath(){{ domxref("SVGPathSegClosePath") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegClosePath") }} object.
createSVGPathSegMovetoAbs(in float x, in float y){{ domxref("SVGPathSegMovetoAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegMovetoRel(in float x, in float y){{ domxref("SVGPathSegMovetoRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegMovetoRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegLinetoAbs(in float x, in float y){{ domxref("SVGPathSegLinetoAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegLinetoRel(in float x, in float y){{ domxref("SVGPathSegLinetoRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2){{ domxref("SVGPathSegCurvetoCubicAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
  • float x1
    + The absolute X coordinate for the first control point.
    • +
  • float y1
    + The absolute Y coordinate for the first control point.
    • +
  • float x2
    + The absolute X coordinate for the second control point.
    • +
  • float y2
    + The absolute Y coordinate for the second control point.
    • +
+
createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2){{ domxref("SVGPathSegCurvetoCubicRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
  • float x1
    + The relative X coordinate for the first control point.
    • +
  • float y1
    + The relative Y coordinate for the first control point.
    • +
  • float x2
    + The relative X coordinate for the second control point.
    • +
  • float y2
    + The relative Y coordinate for the second control point.
    • +
+
createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1){{ domxref("SVGPathSegCurvetoQuadraticAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
  • float x1
    + The absolute X coordinate for the first control point.
    • +
  • float y1
    + The absolute Y coordinate for the first control point.
    • +
+
createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1){{ domxref("SVGPathSegCurvetoQuadraticRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
  • float x1
    + The relative X coordinate for the first control point.
    • +
  • float y1
    + The relative Y coordinate for the first control point.
    • +
+
createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag){{ domxref("SVGPathSegArcAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegArcAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
  • float r1
    + The x-axis radius for the ellipse.
    • +
  • float r2
    + The y-axis radius for the ellipse.
    • +
  • float angle
    + The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
    • +
  • boolean largeArcFlag
    + The value of the large-arc-flag parameter.
    • +
  • boolean sweepFlag
    + The value of the large-arc-flag parameter.
    • +
+
createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag){{ domxref("SVGPathSegArcRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegArcRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
  • float r1
    + The x-axis radius for the ellipse.
    • +
  • float r2
    + The y-axis radius for the ellipse.
    • +
  • float angle
    + The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
    • +
  • boolean largeArcFlag
    + The value of the large-arc-flag parameter.
    • +
  • boolean sweepFlag
    + The value of the large-arc-flag parameter.
    • +
+
createSVGPathSegLinetoHorizontalAbs(in float x){{ domxref("SVGPathSegLinetoHorizontalAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
+
createSVGPathSegLinetoHorizontalRel(in float x){{ domxref("SVGPathSegLinetoHorizontalRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoHorizontalRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The relative X coordinate for the end point of this path segment.
    • +
+
createSVGPathSegLinetoVerticalAbs(in float y){{ domxref("SVGPathSegLinetoVerticalAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalAbs") }} object.
+
+ Parameters: +
    +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegLinetoVerticalRel(in float y){{ domxref("SVGPathSegLinetoVerticalRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegLinetoVerticalRel") }} object.
+
+ Parameters: +
    +
  • float y
    + The relative Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2){{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothAbs") }} object.
+
+ Parameters +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
  • float x2
    + The absolute X coordinate for the second control point.
    • +
  • float y2
    + The absolute Y coordinate for the second control point.
    • +
+
createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2){{ domxref("SVGPathSegCurvetoCubicSmoothRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoCubicSmoothRel") }} object.
+
+ Parameters +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
  • float x2
    + The absolute X coordinate for the second control point.
    • +
  • float y2
    + The absolute Y coordinate for the second control point.
    • +
+
createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y){{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothAbs") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
+
createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y){{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }}Returns a stand-alone, parentless {{ domxref("SVGPathSegCurvetoQuadraticSmoothRel") }} object.
+
+ Parameters: +
    +
  • float x
    + The absolute X coordinate for the end point of this path segment.
    • +
  • float y
    + The absolute Y coordinate for the end point of this path segment.
    • +
+
+ +

 

+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf