Description
Hi and thanks a lot for your plugins!
Using your animate plugin and reveal-md, I'm trying to change the appearance of elements within the SVG drawing.svg
when clicking through the presentation.
In the presentation, I have two working animations that reveal one element (representing an Ethernet cable) each.
I'm having issues with the third animation which is supposed to change the style of the element phone_1
.
Here's the relevant part from the presentation:
<!-- For adding the laptop cable -->
<span class="fragment"></span>
<!-- For adding the printer cable -->
<span class="fragment"></span>
<!-- For changing the appearance of the phone -->
<span class="fragment"></span>
<div data-animate data-src="images/drawing.svg">
<!--
{ "setup":
[
{ "element": "#ethernet_cable_laptop_router", "modifier": "attr", "parameters": [ {"class": "fragment", "data-fragment-index": "0"} ] },
{ "element": "#ethernet_cable_printer_router", "modifier": "attr", "parameters": [ {"class": "fragment", "data-fragment-index": "1"} ] }
],
"animation": [
[],
[
{
"element": "#phone_1",
"modifier": "attr",
"parameters": [ { "style": "fill:#FF0000"} ]
}
]
]
}
-->
</div>
Currently, nothing changes on the third click on that slide (the first two animations work fine).
I can see in Firefox' inspector that the elements ethernet_cable_laptop_router
and ethernet_cable_printer_router
have changes made to their classes when stepping through the animations. But phone_1
's style never changes. This is the entirety of phone_1
as seen by Firefox (it's not the SVG source code):
<path fill="currentColor" d="m 24.188586,102.49742 v 43.39269 h 21.09638 v -43.39269 z m 8.74068,1.92428 h 3.61156 a 0.69453545,0.76972 0 0 1 0,1.53944 h -3.61156 a 0.69453545,0.76972 0 1 1 0,-1.53944 z m 1.76411,40.45912 a 1.6720837,1.8530894 0 1 1 1.67208,-1.85309 1.6720837,1.8530894 0 0 1 -1.67208,1.85309 z m 9.11571,-4.2825 h -18.31825 v -33.00154 h 18.31825 z" id="phone_1" style="fill:#000000" clip-path="none"></path>
Is there a way to change the style (or other property) of an element in the SVG?
Thanks a lot for taking the time!