0

svgpanzoom jsを使用してパス/テキストの正確な位置を変更せずに、svgキャンバス上の一部のパス/テキストを除くすべてのものをズームしたい。私のニーズの実際の作業は、いくつかのマーカーが付いた地図のようなものです。新しいピンやマーカーも動的に配置したい...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="640px" height="480px" viewBox="0 0 640 480">
<g id="viewport">
<rect x="27" y="33" fill="#14A0E8" width="134" height="134"/>
<rect x="27" y="167" fill="#8ABB50" width="134" height="134"/>
<rect x="161" y="231" fill="#F97659" width="134" height="134"/>
<rect x="295" y="167" fill="#14A0E8" width="134" height="134"/>
<rect x="57" y="365" fill="#8ABB50" width="372" height="57"/>
<rect x="161" y="33" fill="#CCCC99" width="134" height="134"/>
<rect x="429" y="33" fill="#F97659" width="134" height="134"/>
<rect x="429" y="301" fill="#F97659" width="134" height="64"/>
<rect x="429" y="202" fill="#CCCC99" width="134" height="64"/>
<g class="noZoom">
<path d="M103.912,213.845c0,5.248-6.218,9.378-9.502,14.649c-4.293-5.507-9.501-9.401-9.501-14.649s4.254-9.501,9.501-9.501
S103.912,208.598,103.912,213.845z"/>
<circle fill="#FFFFFF" cx="94.548" cy="212.497" r="3.349"/>
</g>
<g class="noZoom">
<path d="M480.912,334.846c0,5.247-6.219,9.378-9.502,14.648c-4.293-5.508-9.502-9.401-9.502-14.648
c0-5.248,4.254-9.502,9.502-9.502C476.657,325.344,480.912,329.598,480.912,334.846z"/>
<circle fill="#FFFFFF" cx="471.548" cy="333.496" r="3.349"/>
</g>
<text class="noZoom" transform="matrix(1 0 0 1 80.1992 240)" font-size="8">Marker 1</text>
<text class="noZoom" transform="matrix(1 0 0 1 459.1992 359.5)" font-size="8">Marker 2</text>
<text class="noZoom" transform="matrix(1 0 0 1 201.1992 204.3438)" font-size="8">Some Information</text>
<text class="noZoom" transform="matrix(1 0 0 1 325.6992 274.3438)" font-size="8">Some Another Information</text>
</g>
</svg>

上に示したのは、次のような svg の例です。SVG 内のすべてのものをズームしようとしていますが、ズーム レベルを上げることなく、マーカーとテキスト自体を同じ場所に配置する必要があります。

私はsvgpanzoomを使用しています

4

2 に答える 2

0

1 つのグループ要素をズームできます。必要な要素を配置できます。ドキュメンテーション。デモ。

于 2015-10-09T11:28:55.237 に答える
0

イベントにリスナーを追加して、同様のことを行いましたonZoom。このリスナーでは、倍率に応じてテキスト要素のフォント サイズとパスのストローク幅を大きくしました。もう 1 つの方法は、要素に対して個別のグループを作成し、新しい x および y 変換を取得して呼び出して新しい CTM を取得し、結果として各要素の座標を変更できるイベントnoZoomをリッスンすることです。onPangetZoomnoZoom

于 2016-09-01T09:21:49.933 に答える