SVG缩放onmouseover-元素消失
[英]SVG scale onmouseover - element disappears
问题描述
I've got an SVG map I made and I wanted it to change colour and increase in size on mouseover. 
我有一张制作的SVG地图，我希望它可以在鼠标悬停时改变颜色并增加尺寸。 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. 它似乎可以平移和旋转正常工作。
1 个解决方案
解决方案1
4 已采纳 2012-05-25 15:00:15
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. m645409有效地变为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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.