Set transform of SVG element

I'm trying to set the transform attribute of a group within an SVG.

Specifically, I'd like to set translate's value to 0 0.

I tried using the set element for this but that didn't have an observable effect:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      cursor: pointer;
      fill: papayawhip;
    }
    text {
      font-size: 1px;
      font-family: monospace;
    }
  </style>

  <g id="group" transform="translate(1 2)">
    <rect width="4" height="3"></rect>
    <text x=0.5 y=1.5>Hello</text>
    <set
      attributeName="transform"
      to="translate(0 0)"
      begin="group.click"
      dur="2s"
    />
  </g>
</svg>

MDN Playground here.

Using animateTransform instead works but doesn't move the group instantenously, which I'd prefer:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      cursor: pointer;
      fill: papayawhip;
    }
    text {
      font-size: 1px;
      font-family: monospace;
      cursor: pointer;
    }
  </style>

  <g id="group" transform="translate(1 2)">
    <rect width="4" height="3"></rect>
    <text x="0.5" y="1.5">Hello</text>
    <animateTransform
      attributeName="transform"
      type="translate"
      to="0 0"
      begin="group.click"
      dur="2s"
    />
  </g>
</svg>

MDN Playground here.

Also when setting dur to a small value, there's still at least one frame where the group is in an intermediary position.

Is there a way to use set or something equivalent to set the group's translation?

I'd like to do this with SVG only since I'm chaining a couple of SMIL animations together: The animation after setting the translation to zero is an animateMotion using an mpath.

posted about 1 year ago

CC BY-SA 4.0

1y ago

Matthias Braun‭

93 reputation 4 1 14 11