4

SVG box がある Web ページがあります<svg id='graph'>...</svg>。

ユーザーが SVG ボックスをズームできるようにしたいと思います。

document.getElementById("graph").currentScale*=2;たとえば、ボックスのサイズを 2 倍にしたい場合に、この目的で使用します。

問題は、ボックスの外側の HTML 要素であっても、すべてのウィンドウのサイズが変更されることです。

この問題の原因を教えてください。

4

2 に答える 2

7

svg のみにズームを適用するには、これを使用します...

<svg>
<g transform="scale(2)">

</g>
</svg>
于 2013-07-13T23:14:28.157 に答える
1

これは、使用しているブラウザーがわからないと的外れかもしれませんが、Internet Explorer または Microsoft Edge 以外を使用している場合は currentScale を実装できない可能性があります。この JSBinをさまざまなブラウザーで試してみて、どこにスケーリングするかを確認することで、これを自分でテストできます。

これをさらに掘り下げて、「SVG currentScale」を Google で検索すると、GoogleとMozillaからのこれらのバグ スレッドで同様の問題が議論されていることがわかりました。Mozillaのスレッドでは、これは特に一貫性のために行われた選択であると説明しています。SVG の currentScale は、コンテナー要素にのみ適用され、内部要素には適用されません。これは、内側の SVG 要素で使用される zoomAndPan などの関数に干渉する可能性があります。さらに、transform プロパティを介した scale() など、より優れたクロスブラウザー ソリューションが既に用意されています。

于 2016-01-31T18:03:25.413 に答える