Is it possible to have an animated toolbar button with an SVG graphic?
In my trials I have seen, it is possible to use animated GIF images for toolbar buttons.
But the SVG files I tried so far, generaly display as button, but their animation does not work.
This is the code for the index.js (or main.js) that I used for my trials:
var { ActionButton } = require("sdk/ui/button/action");
var imgFileName = "button.svg";
//var imgFileName = "button.gif";
var button = ActionButton({
id : "my-button",
label : "my button",
icon : "./" + imgFileName,
onClick : function (state) {
console.log("button '" + state.label + "' was clicked");
}
});
This is the content of one of the tried SVG files button.svg
:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="10" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0.15s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0.15s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="20" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0.3s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0.3s" dur="0.6s" repeatCount="indefinite" />
</rect>
</svg>
I have tried several different animated SVG files.
Generally I managed to get them displayed in the toolbar, but I have never succeeded to make them animated.
Is there something I need to insert in the SVG file or in the index.js to make it work, or is it not possible after all?