After successfully setting up the SVG code I want in JSfiddle, I'm now facing the challenge of loading it into a WordPress page. The HTML and CSS are set up, but I am struggling to integrate it smoothly.
I initially tried adding the CSS to my child theme and pasting the HTML code directly into the editor, but that didn't yield the desired result. I also attempted iframing it and exploring other options, but my limited technical knowledge is proving to be an obstacle.
If anyone has a solution or suggestion on how to successfully incorporate this SVG code into a WordPress page, I would greatly appreciate it.
This is my first time reaching out for assistance here, so please forgive me if I overlooked something obvious.
Code:
.hover_group:hover {
opacity: 1;
}
#projectsvg {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#projectsvg svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet">
//set your background image
<image width="1920" height="1080" xlink:href="https://s1.thcdn.com/design-assets/images/nintendo/en/carousel/10881668/large/10881668-3.jpg">
</image>
<image id="estaca" width="120" height="120" xlink:href="https://portuguesewithcarla.com/temp/estaca.png" x="860" y="250" />
<g class="hover_group" opacity="0">
<a xlink:href="http://ptwithcarla.com">
<text x="760" y="380" font-size="40">NÍVEL UM</text>
<rect x="860" y="250" opacity="0.3" fill="#FFFFFF" width="120" height="120"></rect>
</a>
</g>
<g class="hover_group" opacity="0">
<a xlink:href="http://ptwithcarla.com">
<text x="960" y="680" font-size="40">NÍVEL DOIS</text>
<rect x="922" y="654.1" opacity="0.3" fill="#FFFFFF" width="64.6" height="300.8"></rect>
</a>
</g>
<image id="animal" width="80" height="80" xlink:href="https://media.giphy.com/media/182TlvsqrfvlH5dnFm/giphy.gif" x="25" y="550">
<animate
xlink:href="#animal"
attributeName="x"
from="600"
to="1100"
dur="6s"
begin="0s"
repeatCount="indefinite"
fill="freeze"
id="rect-anim"/>
</svg>
</figure>The code essentially mirrors this example: http://jsfiddle.net/wgh52j39/