SVG定位如位置:绝对

Question

我试图将一个内部元素放在根元素内.根元素设置为100%高和100%宽.但是,我希望内部svg从外部svg的边缘开始是10px左右 - 除了右边缘之外,我想从外边缘开始是200px.我希望这能在Web浏览器中显示,因此用户应该能够调整浏览器的大小,从而调整外部svg,而内部svg应该能够保持与每侧外部svg的正确距离.

像这样:

+OUTER SVG------------------------------------------+
|                                                   |
|    +INNER SVG----------------+                    |
|    |                         |                    |
|    |                         |      200px         |
|    |                         | <---+-----+---->   |
|    |                         |                    |
|    |                         |                    |  1
|    |                         |                    |  0
|    |                         |                    |  0
|    |                         |                    |  %
|    |                         |                    |
|    |                         |                    |  h
|    |                         |                    |  i
|    +-------------------------+                    |  g
|                                                   |  h
|                                                   |
+---------------------------------------------------+
                     100% Wide

是否可以单独使用SVG执行此操作？

Answer 1

如果我理解正确的话，这是微不足道的。SVG 被构建为在 Z 堆栈中包含许多视觉元素，对齐、重叠等等。

使用免费开源的 Inkscape 创建 SVG，然后如果您想查看 SVG 是如何形成的，可以直接在文本编辑器中编辑文件。在 Inkscape 中，您可以使用对齐工具、网格、变换缩放工具、拖放以及可能的其他一些工具来完成此操作。