Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[animate] Change appearance of SVG element #168

Open
mb720 opened this issue Jul 23, 2023 · 0 comments
Open

[animate] Change appearance of SVG element #168

mb720 opened this issue Jul 23, 2023 · 0 comments

Comments

@mb720
Copy link

mb720 commented Jul 23, 2023

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant