Animate FROM/TO properties

[SunsetRunner]

Let's say I want to be able to programmatically animate the fill color of an image using any of the following transitions:

• Red → Green
• Red → Blue
• Green → Red
• Green → Blue
• Blue → Red
• Blue → Green

Setting up any one of those transitions is straightforward:

<svg>  
  <defs>
    <symbol id="image-symbol">
      <image href="images/image.png" />
      <animate id="animate" begin="enable" attributeName="fill" from="#ff0000" to="#00ff00" dur="0.25" />
    </symbol>
  </defs>
  <use id="image" href="#image-symbol" />
</svg>

However, in order to accommodate all of those transitions, I would ideally be able to set the from and to attributes dynamically in JavaScript. I was hoping to be able to do that in the following way:

let image = document.getElementById("image");
let animate = image.getElementById("animate");
animate.from = "#ff0000";
animate.to = "#0000ff";

However, this doesn't work. Is there any way to access these from and to attributes?

[sbtn]

After experimenting a bit I couldn't either find these properties, however I found that one way to get more programmatic control would be to define the the animations you want in SVG and call them using the animate(event) method.

<svg>  
  <defs>
    <symbol id="image-symbol">
      <circle cx="50%" cy="50%" r="80" fill="#ffffff">
        <animate id="toRed" begin="enable" attributeName="fill" from="#ffffff" to="#ff0000" dur="1" />
        <animate id="toGreen" begin="enable" attributeName="fill" from="#ffffff" to="#00ff00" dur="1" />
        <animate id="toBlue" begin="enable" attributeName="fill" from="#ffffff" to="#0000ff" dur="1" />
      </circle>
    </symbol>
  </defs>
  <use id="image" href="#image-symbol" />
</svg>

With this javascript

import document from "document";

const toRed = document.getElementById("toRed");
const toGreen = document.getElementById("toGreen");
const toBlue = document.getElementById("toBlue");

// Animate one of the elements animation properties.
toRed.animate("enable");

// Randomly alternate between 3 animations.
const animations = [toRed, toGreen, toBlue];

setInterval(function() {
  animations[Math.floor(Math.random()*2)].animate("enable");
}, 2000);

Here I just set up a simple random color changer (on a circle in the example) but it should work with click events or other kinds of interaction. I know it doesn't answer the question about setting from and to attributes but it might be a way for you to define and control several transitions on the same element.

[npaprika]

You are a life saver m8 thank you so much 😰.