SVG Path 元素DOM属性

Tags
svg
Created
Jul 12, 2016 8:05 AM

SVG2 没了 pathSegList 等方法, https://stackoverflow.com/questions/34352624/alternative-for-deprecated-svg-pathseglist

// canvas 也有画贝塞尔曲线的方法

https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement

getTotalLength() //获取路径总长度

getPointAtLength(in float distance) // 获取距沿路径开始位置指定距离的坐标

getPathSegAtLength(in float distance) // 获取距沿路径开始位置指定距离的接近的锚点。

// 原型上没有转换锚点相对-绝对坐标的方法,只能手动遍历计算。

pathSegList //  可以直接修改路径

document.createElementNS("http://www.w3.org/2000/svg","path"); 新建元素:

  • HTML - Use http://www.w3.org/1999/xhtml
  • SVG - Use http://www.w3.org/2000/svg

createSVGPathSegMovetoAbs(in float x, in float y) // 开始一段路径,参数为绝对, “M”

// 都有一套相对参数(Rel)的方法,大写表示绝对,小写表示相对,字面后面接坐标,空格间隔点

createSVGPathSegLinetoAbs(in float x, in float y) // “L”

createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2) // 3次贝塞尔曲线, “C”

createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2) // 控制点对称的三次贝塞尔曲线,“S”

createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1) // 2次贝塞尔曲线,“Q”

createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)  // 控制点对称的二次贝塞尔曲线,“T”

createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag) // 圆弧曲线,“A”

createSVGPathSegLinetoHorizontal/VerticalAbs(in float x) // 水平/垂直,“H/V”

createSVGPathSegClosePath() // 关闭路径 “z”, 跟开始成对,一个path元素中可以包含多段路径

SuperMade with Super