SVG Image not animating

Resolved EC (Lisa) Stewart
(@ecstewart)

9 years, 6 months ago

Hey Ben-

This plugin looks like it will fit my dreams -I found it by way of a thread you were on because I’ve been desperately looking for a way to integrate SVG graphics into WordPress.

I am having issues with getting my svg to animate.
http://lisastewartdesignstudio.com/index.php/sample-page-2/2406-2/

(You’ll find the 2 svgs at the top of the page just sitting there while the gifs and MP4 spin as they should)

Help!

TIA, Lisa

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Benbodhi
(@benbodhi)

9 years, 6 months ago

Hi @ecstewart,

Firstly, thanks for your support!

It looks like you have animated GIFs and a video taking care of the animation for the ones that are currently working.

Animating SVG is another thing. You will need to inline your SVG files, this is easy using my plugin, you simply use the text tab of the WYSIWYG WordPress editor and find your SVG IMG tags, then add the class style-svg like so:
<img src="http://lisastewartdesignstudio.com/wp-content/uploads/2016/10/YourLogo-Banner_Canvas.svg" class="style-svg">

Then my plugin will render the actual SVG code rather than the IMG.

Now, that’s just one step. You will need to open your SVG file in a code editor before uploading and add classes to the elements you want to target with animation. In your case, that’s quite a few. Once you have “cleaned up” your SVG code to include classes, then you can upload and insert as mentioned above.

Next step is to animate, which you can do a number of ways either using JS or CSS.
I personally use CSS more often than not.

Here is an article about animating SVG using CSS. Note step 3 and 5 is what you will be looking for. Step 3 covers the classes being added to your SVG code. Step 5 covers using CSS to animate the elements. The rest is taken care of already if you followed my instructions.
https://css-tricks.com/animating-svg-css/

Step 3 in this article will also show you some ways of using CSS to animate elements:
http://www.hongkiat.com/blog/advanced-svg-animation-css/

Here is a cool example of animating SVG:
http://codepen.io/TimPietrusky/pen/Bsegb

I hope this helps!
erikmm
(@erikmm)

9 years, 6 months ago
in spite of that ^ it doesn’t seem to animate. I can see the svg, but no animation

in word press it doesn’t seem to work as below:

on a page in the text tab:
<img src="http://mysite/wp-content/uploads/2016/10/dclogo2svgonly.svg" />

in my child theme:
```
.st0.style-svg{fill:#fff;;stroke:#000000;stroke-width:5;stroke-miterlimit:5;}

		.st0.style-svg {
			stroke-dasharray: 2000;
			stroke-dashoffset:0;
			-webkit-animation: dash 4s linear forwards;
			-o-animation: dash 4s linear forwards;
			-moz-animation: dash 4s linear forwards;
			animation: dash 4s linear forwards;
		}
```
the svg image itself that was uploaded to the media library:
```
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	  viewBox="0 0 352 272" style="enable-background:new 0 0 352 272;" xml:space="preserve">

<path class="st0 style-svg" d="M325.398,12.687h-57.146c-32.18,0-61.2,12.451-81.711,35.058c-3.27,3.604-6.276,7.469-9.06,11.525l0.07,0.134
	l-0.07-0.134c-5.55,8.082-10.124,17-13.642,26.58c-1.341,3.443-2.505,6.975-3.333,10.431c-0.021,0.073-0.042,0.147-0.062,0.221
	c0.044-0.792,1.058-18.43,4.275-34.146c0.24-3.405,0.695-19.007-10.223-27.008c-0.857-0.628-1.486-1.143-1.929-1.561
	c-18.117-13.736-39.589-21.098-60.777-21.098H29.618H15.015v14.602v14.602v14.603h14.602h62.171
	c31.215,0,63.502,29.155,63.502,77.945c0,0.207,0.01,0.411,0.01,0.617c-0.001,0.214-0.01,0.426-0.01,0.64
	c0,48.79-32.287,77.945-63.502,77.945H29.618H15.015v0.733v13.87v14.602v14.602h0.68h13.923h62.171
	c32.005,0,64.662-16.784,85.409-46.995c0.018,0.027,0.035,0.054,0.053,0.081c0.277-0.427,0.863-1.343,1.654-2.637
	c3.459-5.336,6.525-11.092,9.188-17.205c2.461-5.39,4.737-11.303,6.073-16.996c0,0-0.953,17.55-4.123,33.439
	c-0.525,4.468-1.094,16.305,6.007,24.485c19.542,16.737,44.717,25.827,72.203,25.827h57.146H340v-14.602v-14.602v-14.602h-14.602
	h-57.146c-34.287,0-68.872-24.309-69.141-78.574c0.269-54.265,34.854-78.574,69.141-78.574h57.146h13.017H340V41.892V27.289V13.584
	v-0.897H325.398z"/>;
</svg>
```
this is the above together and it works on its own if loaded in a browser:
`<svg version=”1.1″ id=”logo” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 352 272″ style=”enable-background:new 0 0 352 272;” xml:space=”preserve”>

<defs>
<style type=”text/css”>

.st0.style-svg{fill:#fff;;stroke:#000000;stroke-width:5;stroke-miterlimit:5;}

.st0.style-svg {
stroke-dasharray: 2000;
stroke-dashoffset:0;
-webkit-animation: dash 4s linear forwards;
-o-animation: dash 4s linear forwards;
-moz-animation: dash 4s linear forwards;
animation: dash 4s linear forwards;
}

#logo.style-svg {
cursor:pointer;
}

#logo:hover .st0.style-svg {
fill:#000;
transition: .8s;
}

#logo.clickit .st0.style-svg {
fill:#1b75bb;
stroke: #1b75bb;
}

@-webkit-keyframes dash.style-svg {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}

</style>

<script type=”text/javascript”>

var clicker = document.querySelector(‘#logo’);

clicker.addEventListener(‘click’, function() {

this.classList.toggle(‘clickit’);

});

</script>
</defs>

<path class=”st0 style-svg” d=”M325.398,12.687h-57.146c-32.18,0-61.2,12.451-81.711,35.058c-3.27,3.604-6.276,7.469-9.06,11.525l0.07,0.134
l-0.07-0.134c-5.55,8.082-10.124,17-13.642,26.58c-1.341,3.443-2.505,6.975-3.333,10.431c-0.021,0.073-0.042,0.147-0.062,0.221
c0.044-0.792,1.058-18.43,4.275-34.146c0.24-3.405,0.695-19.007-10.223-27.008c-0.857-0.628-1.486-1.143-1.929-1.561
c-18.117-13.736-39.589-21.098-60.777-21.098H29.618H15.015v14.602v14.602v14.603h14.602h62.171
c31.215,0,63.502,29.155,63.502,77.945c0,0.207,0.01,0.411,0.01,0.617c-0.001,0.214-0.01,0.426-0.01,0.64
c0,48.79-32.287,77.945-63.502,77.945H29.618H15.015v0.733v13.87v14.602v14.602h0.68h13.923h62.171
c32.005,0,64.662-16.784,85.409-46.995c0.018,0.027,0.035,0.054,0.053,0.081c0.277-0.427,0.863-1.343,1.654-2.637
c3.459-5.336,6.525-11.092,9.188-17.205c2.461-5.39,4.737-11.303,6.073-16.996c0,0-0.953,17.55-4.123,33.439
c-0.525,4.468-1.094,16.305,6.007,24.485c19.542,16.737,44.717,25.827,72.203,25.827h57.146H340v-14.602v-14.602v-14.602h-14.602
h-57.146c-34.287,0-68.872-24.309-69.141-78.574c0.269-54.265,34.854-78.574,69.141-78.574h57.146h13.017H340V41.892V27.289V13.584
v-0.897H325.398z”/>
</svg>
- This reply was modified 9 years, 6 months ago by erikmm.
- This reply was modified 9 years, 6 months ago by erikmm.
Plugin Author Benbodhi
(@benbodhi)

9 years, 6 months ago

Hello @erikmm,

You can swap your code in page with the following that includes the class to make sure the plugin will swap your IMG tag with the SVG itself:
<img src="http://mysite/wp-content/uploads/2016/10/dclogo2svgonly.svg" class="style-svg" />

This should render your SVG inline which is what you need.

erikmm
(@erikmm)

9 years, 6 months ago

wow that was fast…thanks

adding class=”style-svg” didn’t fix it or animate it

Plugin Author Benbodhi
(@benbodhi)

9 years, 6 months ago

I’d be happy to take a look if you shoot me a link to your site.

erikmm
(@erikmm)

9 years, 6 months ago

it works here: http://codepen.io/erikmm/pen/gwNdYB

did the same thing on my site on a test page, but it doesn’t animate

Plugin Author Benbodhi
(@benbodhi)

9 years, 6 months ago

without seeing your actual implementation, I can’t really offer advice.
It sounds to me like it is just not rendering the SVG inline. You can check in the browser inspector to see if it is rendered inline or not.

erikmm
(@erikmm)

9 years, 6 months ago

ok, so I finally got it to work, yeah!: svg-test-page except the javascript, but I imagine I will figure that out eventually

Plugin Author Benbodhi
(@benbodhi)

9 years, 6 months ago

Good news!
Nice implementation, I like the animated outline.
Good luck in getting your JS sorted.