Post History

Set transform of SVG element 

I'm trying to set the [`transform`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) attribute of a group within an SVG.

Specifically, I'd like to set [`translate`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#translate)'s value to `0 0`.

I tried using the [`set`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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](https://developer.mozilla.org/en-US/play?id=YWnhJH9C%2F43IQPYXUJBkMLwjZ2A3M7ZCD5zjryarPwXaEdO0QQHQFkg2q34Lc9NTwLhGHsXTFK79wokx).

Using [`animateTransform`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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](https://developer.mozilla.org/en-US/play?id=HE3r1h9N7XJaFFUKpaBabIMI9bF4He6C797vT%2BQsfvpA1inCXUXTx020QW2LK7y%2FkyJaj%2FBO%2FEZgrbun).

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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion) using an [`mpath`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath).