svgo icon indicating copy to clipboard operation
svgo copied to clipboard

Should the transform attribute also be applied to an animate tag within a path?

Open flehoux opened this issue 9 years ago • 3 comments

flehoux avatar May 04 '16 18:05 flehoux

I guess it should. IIRC there was some related bug.

GreLI avatar May 04 '16 18:05 GreLI

This one SVG is an example of the transform being applied to path's d attribute but not to the values within it's animate.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
  <g fill="currentColor">
    <path transform="translate(2)" d="M0 12 V20 H4 V12z">
      <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
    </path>
    <path transform="translate(8)" d="M0 12 V20 H4 V12z">
      <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
    </path>
    <path transform="translate(14)" d="M0 12 V20 H4 V12z">
      <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
    </path>
    <path transform="translate(20)" d="M0 12 V20 H4 V12z">
      <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
    </path>
    <path transform="translate(26)" d="M0 12 V20 H4 V12z">
      <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
    </path>
  </g>
</svg>

Which plugin should be doing the above work?

flehoux avatar May 04 '16 18:05 flehoux

It's beeing done in plugins/convertPathData.js

GreLI avatar May 07 '16 17:05 GreLI