SVG scale onmouseover - element disappears

RafZinife

New Member
I've got an SVG map I made and I wanted it to change colour and increase in size on mouseover. I managed to get the colour change to work without issue, but when I try to scale the element, it totally disappears when I hover over it!\[code\]<g style="fill:#999999" id="newzealand" onmouseover="this.setAttribute('transform', 'scale(2)');this.style.fill='#83b901';document.getElementById('countryText').textContent='New Zealand';" onmouseout="this.style.fill='#999';document.getElementById('countryText').textContent='';" > <path inkscape:connector-curvature="0" id="path3034" d="m 645,409.28571 -5,7.85715 -3.57143,2.85714 -2.5,5.71429 5.71429,1.42857 3.21428,-6.42857 0,-1.78572 2.14286,-0.71428 3.57143,-7.85715 z" style="stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path inkscape:connector-curvature="0" id="path3036" d="M 650.35714,411.07143 650,407.85714 l -1.78571,-2.14285 0.71428,-4.28572 -2.5,-6.78571 0,-1.42857 2.14286,2.85714 2.14286,2.5 2.85714,3.92857 2.14286,-1.78571 0,3.21428 -1.78572,2.14286 z" style="stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></g>\[/code\]I also tried using an animate element but got the same result. It seems to work fine with translate and rotate.
 
Back
Top