Onmouseover hover effect in SVG when hosted on Sharepoint - svg

Question

Could You help me that:
I have svg file:
FILE_SVG
exported from Illustrator. Designated target for me is to add "hover" effect to it (it could be Zomm effect or color changing), but at the end file will be uploaded into company's intranet site which is running on Sharepoint. I've made it with CSS but internal template is cutting whole css part/code.
As i know it's possible to be done with Javascript...
Cany You help Me with that or provide an extewrnal link to start with (for amateurs ofc).
Thanks for any help...

Answer 1

If your internal template is cutting your custom CSS, then it's likely going to cut your custom JavaScript as well. To my knowledge, you cannot embed hover effects into an SVG. But if you have access to the HTML and CSS or JavaScript then start with the following and experiment.
So you need to have three files.
Your SVG
Your HTML
Your CSS
in your SVG, it's going to have some weird code like:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
copy that into your HTML, and add an id to the svg:
<div class="svg-wrapper">
<svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
</div>
and something like this in your CSS:
#mySVG {
width: 200px;
height: 300px;
}
#mySVG:hover {
width: 250px;
height: 375px;
fill: blue;
}
if you do decide to do JavaScript instead of CSS, it will look something like:
document.getElementById("mySVG").addEventListener("mouseover", function () {
event.target.style.fill="blue";
});
Try this tutorial for using SVG: https://css-tricks.com/using-svg/
Try this tutorial for JavaScript hover events: https://www.w3schools.com/jsref/event_onmouseover.asp

Answer 2

You can achieve hover effects using SVG's built in SMIL animation feature. Sharepoint presumably won't strip that.
<svg>
<circle cx="150" cy="75" r="50" fill="red">
<set attributeName="fill" to="green" begin="mouseover" end="mouseout"/>
</circle>
</svg>
Note that this won't work in IE though. Which might be a problem if you are a big MS workplace :)