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，free和opensource来创建SVG，然后如果要查看SVG是如何形成的，可以直接在文本编辑器中编辑文件。在Inkscape中，您可以使用对齐工具，网格，变换缩放工具，拖放以及可能的其他工具来完成此任务。