SVG 定位如位置 :absolute

Question

我试图在根元素内放置一个内部元素。根元素设置为 100% 高和 100% 宽。但是，我希望内部 svg 与外部 svg 的边缘相距 10 像素左右——除了右边缘，我希望与外右边缘相距 200 像素。我希望它显示在网络浏览器中，因此用户应该能够调整浏览器的大小，从而调整外部 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 中，您可以使用对齐工具、网格、变换缩放工具、拖放和其他一些工具来完成此操作。