I am trying to create an SVG animation. I have created a polygon. On mouseover, it's displaying the text and the polygon has changed its own shape as well as I want.
But when I am going to mouse hover on this text, the polygon animation resets. I want those animations to remain the same, it may be an issue with the polygon shape or the text itself.
Here is my code:
jQuery(document).ready(function(){
jQuery('#poly1').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly1').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check2");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks2");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check3");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks3");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check4");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks4");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly1').on('mouseover', function () {
jQuery('#txt-svg').fadeIn();
jQuery('#txt-svg2').fadeIn();
jQuery('#txt-svg3').fadeIn();
});
jQuery('#poly1').on('mouseout', function () {
jQuery('#txt-svg').fadeOut();
jQuery('#txt-svg2').fadeOut();
jQuery('#txt-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').on('mouseover', function () {
jQuery('#txt2-svg').fadeIn();
jQuery('#txt2-svg2').fadeIn();
jQuery('#txt2-svg3').fadeIn();
});
jQuery('#poly2').on('mouseout', function () {
jQuery('#txt2-svg').fadeOut();
jQuery('#txt2-svg2').fadeOut();
jQuery('#txt2-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').on('mouseover', function () {
jQuery('#txt3-svg').fadeIn();
jQuery('#txt3-svg2').fadeIn();
jQuery('#txt3-svg3').fadeIn();
});
jQuery('#poly3').on('mouseout', function () {
jQuery('#txt3-svg').fadeOut();
jQuery('#txt3-svg2').fadeOut();
jQuery('#txt3-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').on('mouseover', function () {
jQuery('#txt4-svg').fadeIn();
jQuery('#txt4-svg2').fadeIn();
jQuery('#txt4-svg3').fadeIn();
});
jQuery('#poly4').on('mouseout', function () {
jQuery('#txt4-svg').fadeOut();
jQuery('#txt4-svg2').fadeOut();
jQuery('#txt4-svg3').fadeOut();
});
});#txt-svg , #txt-svg2 , #txt-svg3 , #txt2-svg , #txt2-svg2 , #txt2-svg3 , #txt3-svg , #txt3-svg2 , #txt3-svg3 , #txt4-svg , #txt4-svg2 , #txt4-svg3 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="auto" viewBox="0 0 1360 720" enable-background="new 0 0 1360 720" xml:space="preserve">
<a href="index.php/coaching" class="animsition-link">
<polygon id="poly3" fill="red" points="1072.229,720.052 572.229,720.052 788.229,0.052 1288.229,0.052 ">
<animate id="animation-to-check3" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1072.229,720.052 372.229,720.052 588.229,0.052 1288.229,0.052"/>
<animate id="animation-to-yellow3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"/>
<animate id="animation-to-checks3" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1072.229,720.052 572.229,720.052 788.229,0.052 1288.229,0.052"/>
<animate id="animation-to-def3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#0D3E49"/>
</polygon>
<text id="txt3-svg" transform="matrix(1 0 0 1 838.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">COACHING CENTRES</text>
<text id="txt3-svg2" transform="matrix(1 0 0 1 877.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">NEAR YOU</text>
<rect id="txt3-svg3" x="890.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="114.667" height="4"/>
</a>
<a href="index.php/online" class="animsition-link">
<polygon id="poly4" fill="green" points="1571.229,720.104 1071.229,720.104 1287.229,0.104 1787.229,0.104 ">
<animate id="animation-to-check4" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1571.229,720.104 771.229,720.104 987.229,0.104 1787.229,0.104"/>
<animate id="animation-to-yellow4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#b30059"/>
<animate id="animation-to-checks4" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1571.229,720.104 1071.229,720.104 1287.229,0.104 1787.229,0.104"/>
<animate id="animation-to-def4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#54A2AF"/>
</polygon>
<text id="txt4-svg" transform="matrix(1 0 0 1 1083.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">ONLINE</text>
<text id="txt4-svg2" transform="matrix(1 0 0 1 1075.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">TUTION</text>
<rect id="txt4-svg3" x="1091.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="72.667" height="4"/>
</a>
<a href="index.php/locality" class="animsition-link">
<polygon id="poly2" fill="yellow" points="572.271,720 72.271,720 288.271,0 788.271,0">
<animate id="animation-to-check2" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="772.271,720 72.271,720 288.271,0 988.271,0"/>
<animate id="animation-to-yellow2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"/>
<animate id="animation-to-checks2" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="572.271,720 72.271,720 288.271,0 788.271,0"/>
<animate id="animation-to-def2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#6599A5"/>
</polygon>
<text id="txt2-svg" transform="matrix(1 0 0 1 412.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">TUTORS IN</text>
<text id="txt2-svg2" transform="matrix(1 0 0 1 362.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">YOUR LOCALITY</text>
<rect id="txt2-svg3" x="388.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="164.667" height="4"/>
</a>
<a href="index.php/abt" class="animsition-link" id="an-1">
<polygon id="poly1" fill="blue" points="72.771,720 -427.229,720 -211.229,0 288.771,0">
<animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="372.771,720 -427.229,720 -211.229,0 588.771,0"/>
<animate id="animation-to-checks" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="72.771,720 -427.229,720 -211.229,0 288.771,0"/>
<animate id="animation-to-def" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="rgba(190, 242, 247,0.5)"/>
</polygon>
<text id="txt-svg" transform="matrix(1 0 0 1 82.7598 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">TUTOR AT</text>
<text id="txt-svg2" transform="matrix(1 0 0 1 24.6108 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">YOUR LOCATION</text>
<rect id="txt-svg3" x="51.385" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="164.667" height="4"/>
</a>
</svg>Make the text pointer-events="none" so it doesn't interfere with the hover state of the underlying shape.
jQuery(document).ready(function(){
jQuery('#poly1').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly1').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check2");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks2");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check3");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks3");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').mouseover(function(){
var animationToCheck = document.getElementById("animation-to-check4");
animationToCheck.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').mouseout(function(){
var animationToChecks = document.getElementById("animation-to-checks4");
animationToChecks.beginElement();
});
});
jQuery(document).ready(function(){
jQuery('#poly1').on('mouseover', function () {
jQuery('#txt-svg').fadeIn();
jQuery('#txt-svg2').fadeIn();
jQuery('#txt-svg3').fadeIn();
});
jQuery('#poly1').on('mouseout', function () {
jQuery('#txt-svg').fadeOut();
jQuery('#txt-svg2').fadeOut();
jQuery('#txt-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly2').on('mouseover', function () {
jQuery('#txt2-svg').fadeIn();
jQuery('#txt2-svg2').fadeIn();
jQuery('#txt2-svg3').fadeIn();
});
jQuery('#poly2').on('mouseout', function () {
jQuery('#txt2-svg').fadeOut();
jQuery('#txt2-svg2').fadeOut();
jQuery('#txt2-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly3').on('mouseover', function () {
jQuery('#txt3-svg').fadeIn();
jQuery('#txt3-svg2').fadeIn();
jQuery('#txt3-svg3').fadeIn();
});
jQuery('#poly3').on('mouseout', function () {
jQuery('#txt3-svg').fadeOut();
jQuery('#txt3-svg2').fadeOut();
jQuery('#txt3-svg3').fadeOut();
});
});
jQuery(document).ready(function(){
jQuery('#poly4').on('mouseover', function () {
jQuery('#txt4-svg').fadeIn();
jQuery('#txt4-svg2').fadeIn();
jQuery('#txt4-svg3').fadeIn();
});
jQuery('#poly4').on('mouseout', function () {
jQuery('#txt4-svg').fadeOut();
jQuery('#txt4-svg2').fadeOut();
jQuery('#txt4-svg3').fadeOut();
});
});#txt-svg , #txt-svg2 , #txt-svg3 , #txt2-svg , #txt2-svg2 , #txt2-svg3 , #txt3-svg , #txt3-svg2 , #txt3-svg3 , #txt4-svg , #txt4-svg2 , #txt4-svg3 {
display: none;
}
text {
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="auto" viewBox="0 0 1360 720" enable-background="new 0 0 1360 720" xml:space="preserve">
<a href="index.php/coaching" class="animsition-link">
<polygon id="poly3" fill="red" points="1072.229,720.052 572.229,720.052 788.229,0.052 1288.229,0.052 ">
<animate id="animation-to-check3" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1072.229,720.052 372.229,720.052 588.229,0.052 1288.229,0.052"/>
<animate id="animation-to-yellow3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"/>
<animate id="animation-to-checks3" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1072.229,720.052 572.229,720.052 788.229,0.052 1288.229,0.052"/>
<animate id="animation-to-def3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#0D3E49"/>
</polygon>
<text id="txt3-svg" transform="matrix(1 0 0 1 838.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">COACHING CENTRES</text>
<text id="txt3-svg2" transform="matrix(1 0 0 1 877.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">NEAR YOU</text>
<rect id="txt3-svg3" x="890.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="114.667" height="4"/>
</a>
<a href="index.php/online" class="animsition-link">
<polygon id="poly4" fill="green" points="1571.229,720.104 1071.229,720.104 1287.229,0.104 1787.229,0.104 ">
<animate id="animation-to-check4" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1571.229,720.104 771.229,720.104 987.229,0.104 1787.229,0.104"/>
<animate id="animation-to-yellow4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#b30059"/>
<animate id="animation-to-checks4" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="1571.229,720.104 1071.229,720.104 1287.229,0.104 1787.229,0.104"/>
<animate id="animation-to-def4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#54A2AF"/>
</polygon>
<text id="txt4-svg" transform="matrix(1 0 0 1 1083.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">ONLINE</text>
<text id="txt4-svg2" transform="matrix(1 0 0 1 1075.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">TUTION</text>
<rect id="txt4-svg3" x="1091.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="72.667" height="4"/>
</a>
<a href="index.php/locality" class="animsition-link">
<polygon id="poly2" fill="yellow" points="572.271,720 72.271,720 288.271,0 788.271,0">
<animate id="animation-to-check2" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="772.271,720 72.271,720 288.271,0 988.271,0"/>
<animate id="animation-to-yellow2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"/>
<animate id="animation-to-checks2" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="572.271,720 72.271,720 288.271,0 788.271,0"/>
<animate id="animation-to-def2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#6599A5"/>
</polygon>
<text id="txt2-svg" transform="matrix(1 0 0 1 412.6489 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">TUTORS IN</text>
<text id="txt2-svg2" transform="matrix(1 0 0 1 362.5 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">YOUR LOCALITY</text>
<rect id="txt2-svg3" x="388.274" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="164.667" height="4"/>
</a>
<a href="index.php/abt" class="animsition-link" id="an-1">
<polygon id="poly1" fill="blue" points="72.771,720 -427.229,720 -211.229,0 288.771,0">
<animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="372.771,720 -427.229,720 -211.229,0 588.771,0"/>
<animate id="animation-to-checks" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="72.771,720 -427.229,720 -211.229,0 288.771,0"/>
<animate id="animation-to-def" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="rgba(190, 242, 247,0.5)"/>
</polygon>
<text id="txt-svg" transform="matrix(1 0 0 1 82.7598 280.5)" fill="#1C1B1C" font-family="'Open Sans'" font-size="23">TUTOR AT</text>
<text id="txt-svg2" transform="matrix(1 0 0 1 24.6108 323.5)" fill="#1C1B1C" font-family="'zaioregular'" font-size="30">YOUR LOCATION</text>
<rect id="txt-svg3" x="51.385" y="339.833" opacity="0.7" fill="#1C1B1C" enable-background="new " width="164.667" height="4"/>
</a>
</svg>