javascript - 使用 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又名。由 native DOM 元素实现的 SVGLocatable 和 SVGTransformable 接口(interface)/API。

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

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

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

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

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

// javascript js equivalent declaration:
// function getAttributeTransform_js(nativeSVGElement) {
// typescript ts declaration
function getAttributeTransform_ts(nativeSVGElement: SVGGraphicsElement) {
  // this definition works in ts and js
  const tl = nativeSVGElement.transform.baseVal;
  const st = [];
  for (let i = 0; i < tl.numberOfItems; i++) {
    const t/*: SVGTransform*/ = tl.getItem(i);
    switch (t.type) {
      case SVGTransform.SVG_TRANSFORM_UNKNOWN: break;
      case SVGTransform.SVG_TRANSFORM_MATRIX: {
        // A matrix(…) transformation
        // Note: this is the most general transformation, capable of representing more transformations than the other combined.
        // For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user.
        //
        // Note: instead of comma (,), whitespace separation would also be allowed
        st.push(`matrix(${t.matrix.a}, ${t.matrix.b}, ${t.matrix.c}, ${t.matrix.d}, ${t.matrix.e}, ${t.matrix.f})`);
        break;
      }
      case SVGTransform.SVG_TRANSFORM_TRANSLATE: {
        // A translate(…) transformation
        // For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1).
        st.push(`translate(${t.matrix.e}, ${t.matrix.f})`);
        break;
      }
      case SVGTransform.SVG_TRANSFORM_SCALE: {
        // A scale(…) transformation
        // For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0).
        st.push(`scale(${t.matrix.a}, ${t.matrix.d})`);
        break;
      }
      case SVGTransform.SVG_TRANSFORM_ROTATE: {
        // A rotate(…) transformation
        // For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation.
        // When the rotation is around the center point (0, 0), e and f will be zero.
        /*
        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.

        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.
        */
        /*
        This is the hardest case since the origin information is lost!
        We need to recompute it from the matrix.
        from https://math.stackexchange.com/questions/2093314/rotation-matrix-of-rotation-around-a-point-other-than-the-origin

        matrix.a = cos_angle = c;
        matrix.b = sin_angle = s;
        Note that by the laws of geometry: c^2+s^2 = 1 (c and s are coordinates on the unit circle)
        matrix.e = -x*c + y*s + x;
        matrix.f = -x*s - y*c + y;

        Using Mathematica/Wolfram Language:
        "Assuming[c^2+s^2==1,Solve[e == -x*c + y*s + x&& f == -x*s - y*c + y,{x,y},Reals]//Simplify]//InputForm"
        (you can use WL for free here: https://develop.wolframcloud.com/objects/c26e16f7-44e7-4bb6-81b3-bc07782f9cc5)
        {{x -> (e + (f*s)/(-1 + c))/2, y -> (f - c*f + e*s)/(2 - 2*c)}}
        */
        const e = t.matrix.e, f = t.matrix.f, c = t.matrix.a, s = t.matrix.b;
        const originx = (e + (f*s)/(-1 + c))/2;
        const originy = (f - c*f + e*s)/(2 - 2*c);
        st.push(`rotate(${t.angle}, ${originx}, ${originy})`);
        break;
      }
      case SVGTransform.SVG_TRANSFORM_SKEWX: {
        // A skewx(…) transformation
        // 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).
        /*
        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.

        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.
        */
        st.push(`skewx(${t.angle})`);
        break;
      }
      case SVGTransform.SVG_TRANSFORM_SKEWY: {
        // A skewy(…) transformation
        // 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).
        /*
        angle   float   A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.

        For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.
        */
        st.push(`skewy(${t.angle})`);
        break;
      }
    }
  }
  return st.join(','); // instead of comma (,), whitespace separation is also allowed
}

// example
const r = <SVGRectElement>document.createElementNS("http://www.w3.org/2000/svg", "rect");

// the parseable syntax for the transform attribute is pretty relaxed
r.setAttribute("transform", "translate(1, 0),rotate(0.5),   scale(1 2)");

// note that the browser may canonicalize your syntax
// EDGE canonicalizes the transform to read:
// 'translate(1) rotate(0.5) scale(1, 2)'
console.log(r.getAttribute("transform"));

// basically equivalent:
console.log(getAttributeTransform_ts(r));

你的例子:

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

getAttributeTransform_ts(createElementFromHTML(`
<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>
`))

// gives
// 'rotate(-10, 49.99999999999982, 99.99999999999972),translate(-36, 45.5),skewx(40),scale(1, 0.5)'

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

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

灵感来源:

• Parse SVG transform attribute with javascript
• https://stackoverflow.com/a/41102221/524504

另请参阅:

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