SVG scale onmouseover - 元素消失

Question

我有我製作的SVG地圖，我希望它在鼠標懸停時改變顏色和增加尺寸。我設法讓顏色變化毫無問題地工作，但是當我嘗試縮放元素時，當我將它懸停在它上面時，它完全消失了！

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

我也嘗試過使用animate元素，但得到了相同的結果。它似乎與翻譯和旋轉很好地工作。

Answer 1

您的繪圖不在原點，所以當您縮放它時，它會從頁面的邊緣消失。 m 645,409有效地變成m 1290,818。如果我們刪除了兩倍的座標，繪圖仍保持在同一點。

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