Question

I want to switch between exactly two values in an SVG animate element. I tried it this way:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">

    <rect x="10" y="10" width="100" height="100" fill="blue" stroke="red">
        <animate attributeName="fill-opacity" values="0; 1" dur="1s" repeatCount="indefinite"/>
    </rect>
</svg>

I wanted have the fill-opacity switching between the values 0 and 1. But what it does is fading from 0 to 1. I want it to stay on 0 for 1s, then stay on 1 for 1s, back to 0 for 1s and so on.

How do I do that? I tried nearly all possible attribute combinations but didn’t manage it.

Answer 1

You want calcMode=”discrete” on the animate element the default is linear.