2

作成した 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>

アニメーション要素も使用してみましたが、同じ結果が得られました。平行移動と回転で問題なく動作するようです。

4

1 に答える 1

4

図面は原点にないため、拡大縮小すると、ページの端から消えます。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>
于 2012-05-25T15:00:15.020 に答える