使用 typescript 解析 SVG 转换属性

Question

如何使用 typescript 解析 svg 元素的转换属性？

也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作，如下所示：

<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="grey"
     transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)">
    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use xlink:href="#heart" fill="none" stroke="red"/>
</svg>

Answer 1

使用https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement又名。SVGLocatable以及SVGTransformable由本机 DOM 元素实现的接口/API。

\n\n

这些元素具有.transform与变换属性相对应的属性。该属性的类型为https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedTransformList，并且您想要查看静态定义的baseVal。

\n\n

变换列表有一个属性numberOfItems和一个getItem方法。它可能有一个.length属性和[]数组访问器，并且它可能在您的浏览器中是可迭代的，但不要指望这一点。

\n\n

每个项目的类型为https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform

\n\n

该.type属性会告诉您使用了哪条指令。

\n\n

因此，您可以通过以下方式解析然后再次手动合成转换属性：

\n\n

// javascript js equivalent declaration:\n// function getAttributeTransform_js(nativeSVGElement) {\n// typescript ts declaration\nfunction getAttributeTransform_ts(nativeSVGElement: SVGGraphicsElement) {\n  // this definition works in ts and js\n  const tl = nativeSVGElement.transform.baseVal;\n  const st = [];\n  for (let i = 0; i < tl.numberOfItems; i++) {\n    const t/*: SVGTransform*/ = tl.getItem(i);\n    switch (t.type) {\n      case SVGTransform.SVG_TRANSFORM_UNKNOWN: break;\n      case SVGTransform.SVG_TRANSFORM_MATRIX: {\n        // A matrix(\xe2\x80\xa6) transformation\n        // Note: this is the most general transformation, capable of representing more transformations than the other combined.\n        // For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user.\n        //\n        // Note: instead of comma (,), whitespace separation would also be allowed\n        st.push(`matrix(${t.matrix.a}, ${t.matrix.b}, ${t.matrix.c}, ${t.matrix.d}, ${t.matrix.e}, ${t.matrix.f})`);\n        break;\n      }\n      case SVGTransform.SVG_TRANSFORM_TRANSLATE: {\n        // A translate(\xe2\x80\xa6) transformation\n        // For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1).\n        st.push(`translate(${t.matrix.e}, ${t.matrix.f})`);\n        break;\n      }\n      case SVGTransform.SVG_TRANSFORM_SCALE: {\n        // A scale(\xe2\x80\xa6) transformation\n        // For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0).\n        st.push(`scale(${t.matrix.a}, ${t.matrix.d})`);\n        break;\n      }\n      case SVGTransform.SVG_TRANSFORM_ROTATE: {\n        // A rotate(\xe2\x80\xa6) transformation\n        // For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation.\n        // When the rotation is around the center point (0, 0), e and f will be zero.\n        /*\n        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.\n\n        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.\n        */\n        /*\n        This is the hardest case since the origin information is lost!\n        We need to recompute it from the matrix.\n        from https://math.stackexchange.com/questions/2093314/rotation-matrix-of-rotation-around-a-point-other-than-the-origin\n\n        matrix.a = cos_angle = c;\n        matrix.b = sin_angle = s;\n        Note that by the laws of geometry: c^2+s^2 = 1 (c and s are coordinates on the unit circle)\n        matrix.e = -x*c + y*s + x;\n        matrix.f = -x*s - y*c + y;\n\n        Using Mathematica/Wolfram Language:\n        "Assuming[c^2+s^2==1,Solve[e == -x*c + y*s + x&& f == -x*s - y*c + y,{x,y},Reals]//Simplify]//InputForm"\n        (you can use WL for free here: https://develop.wolframcloud.com/objects/c26e16f7-44e7-4bb6-81b3-bc07782f9cc5)\n        {{x -> (e + (f*s)/(-1 + c))/2, y -> (f - c*f + e*s)/(2 - 2*c)}}\n        */\n        const e = t.matrix.e, f = t.matrix.f, c = t.matrix.a, s = t.matrix.b;\n        const originx = (e + (f*s)/(-1 + c))/2;\n        const originy = (f - c*f + e*s)/(2 - 2*c);\n        st.push(`rotate(${t.angle}, ${originx}, ${originy})`);\n        break;\n      }\n      case SVGTransform.SVG_TRANSFORM_SKEWX: {\n        // A skewx(\xe2\x80\xa6) transformation\n        // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).\n        /*\n        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.\n\n        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.\n        */\n        st.push(`skewx(${t.angle})`);\n        break;\n      }\n      case SVGTransform.SVG_TRANSFORM_SKEWY: {\n        // A skewy(\xe2\x80\xa6) transformation\n        // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).\n        /*\n        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.\n\n        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.\n        */\n        st.push(`skewy(${t.angle})`);\n        break;\n      }\n    }\n  }\n  return st.join(\',\'); // instead of comma (,), whitespace separation is also allowed\n}\n

\n\n

// example\nconst r = <SVGRectElement>document.createElementNS("http://www.w3.org/2000/svg", "rect");\n\n// the parseable syntax for the transform attribute is pretty relaxed\nr.setAttribute("transform", "translate(1, 0),rotate(0.5),   scale(1 2)");\n\n// note that the browser may canonicalize your syntax\n// EDGE canonicalizes the transform to read:\n// \'translate(1) rotate(0.5) scale(1, 2)\'\nconsole.log(r.getAttribute("transform"));\n\n// basically equivalent:\nconsole.log(getAttributeTransform_ts(r));\n

\n\n

你的例子：

\n\n

function createElementFromHTML(htmlString) {\n  var div = document.createElement(\'div\');\n  div.innerHTML = htmlString.trim();\n\n  // Change this to div.childNodes to support multiple top-level nodes\n  return div.firstChild; \n}\n\ngetAttributeTransform_ts(createElementFromHTML(`\n<g fill="grey"\n     transform="rotate(-10 50 100)\n                translate(-36 45.5)\n                skewX(40)\n                scale(1 0.5)">\n    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />\n  </g>\n`))\n\n// gives\n// \'rotate(-10, 49.99999999999982, 99.99999999999972),translate(-36, 45.5),skewx(40),scale(1, 0.5)\'\n

\n\n

请注意，您应该使用.getAttribute("transform")让浏览器为您合成 SVGTransformList 的字符串形式，而不是使用我上面的脚本！

\n\n

请注意，我们无法完美检索“rotate”的原始参数，因为没有针对它的 API。它必须根据二维齐次（旋转）矩阵计算。

\n\n

灵感来自：

\n\n

\n
• 使用 javascript 解析 SVG 转换属性
\n
• /sf/answers/2877155501/
\n

\n\n

也可以看看：

\n\n

\n
• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
\n

\n