Home/ Questions/Q 7997191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:54:59+00:00

I’ve got an SVG map I made and I wanted it to change colour

  • 0

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!

<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>

I also tried using an animate element but got the same result. It seems to work fine with translate and rotate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your drawing isn’t at the origin so when you scale it, it disappears off the edge of the page. m 645,409 effectively becomes m 1290,818. If we remove the doubling of the co-ordinates the drawing remains at the same point.

    <g
   style="fill:#999999"
   id="newzealand"
   onmouseover="this.setAttribute('transform', 'translate(-645, -409) scale(2)');this.style.fill='#83b901';document.getElementById('countryText').textContent='New Zealand';"
   onmouseout="this.style.fill='#999';document.getElementById('countryText').textContent='';"
   >
  <path
     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
     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>
    • 0