0

新人のように聞こえるかもしれませんが、SVG 図面のデフォルトの開始位置を変更するにはどうすればよいですか? 図面は非常に大きく (2130 x 3100 ピクセル)、私の画面領域よりも大きく、パスを定義する ID があります。パスは、建築フロア プランのさまざまな部屋の輪郭を描いています。

ポイントを説明し、読者に助けを求めるために、SVGコード全体を貼り付けようとしました。付ける方法はありますか？今のところ、(ランダムな部屋の) スニペットのみが含まれています。

現在、ファイルは図面の左上隅にデフォルト設定されていますが、これを「myID」で開くように変更したいと考えています。たとえば、特定の SVG を開くと、左上の部屋 P117、P118、P119 が表示されます。ユーザーに右下の部屋 P124 または中央付近の部屋 P113 を表示させたい場合はどうすればよいでしょうか? つまり、ルーム ID を使用して SVG の開始位置を指定できますか? そして、私はそれを内部的に行うことができますか？

SVG、HTML、および JavaScript を理解する「Web ビューアー」でこれを使用していることに言及する必要があるかもしれませんが、それ自体はブラウザーではありません。FileMaker に精通している方は、私が何を言いたいかお分かりでしょう。役に立たない外部ファイル参照を提案する人がいる場合に備えて、これは重要だと思います。

とにかく、これがSVGです。どんな助けでも大歓迎です。

ありがとう、レオ

<path
       style="fill:none;stroke:#250000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="m 1146.9779,223.87304 c 0,51.75805 0,103.51609 0,155.27414 164.7957,0 329.5913,0 494.387,0 0,-20.01962 0,-40.03925 0,-60.05887 -164.7957,-31.73842 -329.5913,-63.47685 -494.387,-95.21527 z"
       id="P119"
       inkscape:connector-curvature="0"
       inkscape:label="#P119" />
<path
       style="fill:none;stroke:none"
       d="m 1149.6255,377.00439 c 59.8716,0.24414 119.7432,0.48829 179.6148,0.73243 -0.3382,30.85668 -0.6763,61.71337 -1.0145,92.57005 -7.8876,0 -15.7751,0 -23.6627,0 0,20.43204 0,40.86409 0,61.29613 6.798,0 13.5961,0 20.3941,0 0,6.31056 0,12.62111 0,18.93167 -49.8049,0 -99.6099,0 -149.4148,0 0,13.80389 0,27.60779 0,41.41168 -9.0332,0 -18.0665,0 -27.0997,0 0,-44.02138 0,-88.04275 0,-132.06413 7.0612,0 14.1223,0 21.1835,0 0,-10.53522 0,-21.07043 0,-31.60565 -6.3287,0 -12.6575,0 -18.9862,0 -0.3382,-17.09073 -0.6763,-34.18145 -1.0145,-51.27218 z"
       id="P118"
       inkscape:connector-curvature="0"
       inkscape:label="#P118" />
<path
       style="fill:none;stroke:none"
       d="m 1184.3315,559.32378 c 47.1194,0 94.2387,0 141.3581,0 -0.4883,19.09995 -0.9765,38.1999 -1.4648,57.29985 -47.1194,-0.73243 -94.2387,-1.46485 -141.3581,-2.19728 0.4883,-18.36752 0.9765,-36.73505 1.4648,-55.10257 z"
       id="P117"
       inkscape:connector-curvature="0"
       inkscape:label="#P117" />


<path
       style="fill:none;stroke:none"
       d="m 2763.9405,2607.0739 c 0,80.4835 0,160.967 0,241.4505 39.2273,0 78.4545,0 117.6818,0 0,-80.4835 0,-160.967 0,-241.4505 -39.2273,0 -78.4545,0 -117.6818,0 z"
       id="P124"
       inkscape:connector-curvature="0" />


<path
       style="fill:none;stroke:none"
       d="m 1805.24,1677.2866 c 0,41.4253 0,82.8507 0,124.276 28.575,0 57.1501,0 85.7251,0 0,-41.5944 0,-83.1889 0,-124.7833 -28.575,0.1691 -57.1501,0.3382 -85.7251,0.5073 z"
       id="P113"
       inkscape:connector-curvature="0" />
4

1 に答える 1

0

ルーキーの質問ではありません。まだ行っていない場合は、SVG要素にviewBoxを指定する必要があります。寸法を考えると、次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2130 3100">
  ...
</svg>

描画アプリケーションに精通している場合、viewBoxはズームツールをキャンバス上にドラッグするのと同じです。最初の2桁はとになりx、y最後の2桁はズームの「長方形」の高さと幅になります。

ここで、ビューポートを部屋に移動したいとします。P113これは、次のようにします。

var svg = document.querySelector('svg');
var room = document.getElementById('P113');
var bbox = room.getBBox();
svg.setAttribute("viewBox",  bbox.x + " " + bbox.y + " 2130 3100");

これにより、実際にP113は左上隅に部屋が表示されます。ビューポートの中央に部屋を配置する場合は、ビューポートの寸法と部屋の寸法を計算することで行うことができますが、これで開始できます。

于 2013-02-04T23:20:48.373 に答える