Question

我正在尝试在SVG中创建一个可调整大小的窗口，我希望在其中有一些指示器可以拖动窗口以调整其大小。我目前得到以下内容：

＆＃13;

<svg width="300" height="200">
<rect x="25" y="25" width="150" height="100" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5,5" />
<g fill="white" stroke="black" stroke-width="1">
    <rect x="23" y="23" width="5" height="5" style="cursor:nw-resize" />
    <rect x="173" y="23" width="5" height="5" style="cursor:ne-resize" />
    <rect x="173" y="123" width="5" height="5" style="cursor:se-resize" />
    <rect x="23" y="123" width="5" height="5" style="cursor:sw-resize" />
</g>
</svg>

＆＃13;

但如果我想调整大小，那么每当调整其中一个角时，我都必须更新三个<rect>，或者如果我要在线的中间添加方块（就像MS Paint使用的那样），我必须一次更新5个。

那么可以将这四个框相对于父<g>定位吗？这样，我只需要调整<g> width和height的大小，以自动移动所有<rect>。在我看来，这种事情（将SVG元素组合在一起）是<g>标签的发明，但是我找不到任何关于如何做我想做的事情。

Answer 1

<svg>元素嵌套，以便在内部<svg>元素中粘贴您要调整大小的内容并更改其viewBox

viewBox定义了一个元素中可见的区域，所以如果你把它放大，内容会显得更小，反之亦然。

相对于父母的位置元素

1 个答案: