0

At the risk of sounding like a rookie, which I am, how can I change the default opening position of an SVG drawing? The drawing is quite large -- 2130 x 3100 px -- larger than my screen area, and has IDs that define paths. The paths outline the various rooms on an architectural floor plan.

Tried to paste the entire SVG code, to help illustrate the point and to request help from readers. Is there a way I can attach it? For now, only snippets (of random rooms) are included.

Currently, the file defaults to the top left corner of the drawing, which I'd like to change to open on "myID". For example, when the given SVG is opens, user sees top left rooms P117, P118, P119. What if I wanted user to see bottom right room P124, or near-center room P113? That is, can I use a room ID to specify the opening position of the SVG? And can I do it internally?

Maybe I should mention that I'm using this in a "web viewer" that understands SVG, HTML, and javascript, but it's not a browser per se. Those of you familiar with FileMaker will know what I mean. I'm thinking this matters in case some of you suggest external file references, which won't help.

Anyway, here's the SVG. Any help is greatly appreciated.

Thanks, Leo

<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 相当于将缩放工具拖到画布上。前两位数字将是x和y，最后两位数字将是缩放“矩形”的高度和宽度。

现在，假设您想将视口移动到 room 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 回答