Setting the to and from parameters of an animate element via JavaScript

[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?

[JonFitbit]

You can't in the current version of the firmware, but I've requested this already and it should be available in a future update.

[_prasad1120]

Hi,

Is it possible now as almost 2 years have passed?

[JonFitbit]

---

@_prasad1120 wrote:

Hi,

Is it possible now as almost 2 years have passed?

---

Yes, it's possible. Get the element by ID, set the value.  `animElement.from=20`