Skip to content

[animate] Change appearance of SVG element #168

Open
@mb720

Description

@mb720

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions