SVG缩放onmouseover-元素消失 [英] SVG scale onmouseover - element disappears

问题描述

我有一张制作的SVG地图，我希望它可以在鼠标悬停时改变颜色并增加尺寸.我设法使颜色更改可以正常使用，但是当我尝试缩放该元素时，将鼠标悬停在该元素上时，它完全消失了！

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.

推荐答案

您的图形不在原点，因此在缩放时，它会从页面边缘消失. m645409有效地变为m 1290,818.如果删除坐标的两倍，则图形将保留在同一点.

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>

这篇关于SVG缩放onmouseover-元素消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！