Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
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.
2 answers
The following users marked this post as Works for me:
| User | Comment | Date |
|---|---|---|
| Matthias Braun | (no comment) | Oct 12, 2023 at 11:15 |
<set> does seem to be a bit finicky for this case, doesn't it?
You can use <animateTransform> if you set the values attribute on it instead of the to attribute, like this:
<animateTransform
attributeName="transform"
type="translate"
values="0 0"
begin="group.click"
dur="2s"
/>
0 comment threads
AnimateTransform can only animate transforms, conversely transforms can only be animated by animateTransform.
So we need to start with an animateTransform and then apply it immediately. Using to is not recommended for animateTransform so rather than using to (and also therefore from to get instant animation) we'll use values which works as both to and from.
<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"
values="0 0"
begin="group.click"
/>
</g>
</svg>
0 comment threads
0 comment threads