SVG定位如position:absolute
我正在尝试将内部元素放置在根元素内。根元素设置为 100% 高和 100% 宽。但是，我希望内部 svg 距外部 svg 边缘 10 像素左右——除了右边缘，我希望右边缘距外部右边缘 200 像素。我希望它显示在网络浏览器中，因此用户应该能够调整浏览器的大小，从而调整外部 svg 的大小，而内部 svg 应该能够与每一侧的外部 svg 保持正确的距离。
像这样：
+OUTER SVG------------------------------------------+
| |
| +INNER SVG----------------+ |
| | | |
| | | 200px |
| | | <---+-----+----> |
| | | |
| | | | 1
| | | | 0
| | | | 0
| | | | %
| | | |
| | | | h
| | | | i
| +-------------------------+ | g
| | h
| |
+---------------------------------------------------+
100% Wide
是否可以单独使用 SVG 来做到这一点？
I am trying to position an inner element inside the root element. The root element is set to be 100% high and 100% wide. However, I want the inner svg to be 10px or so from the edge of the outer svg--all except the right edge, which I would like to be 200px from the outer right edge. I want this to display in a web browser and so the user should be able to resize the browser and hence the outer svg while the inner svg should be able to maintain the correct distance from the outer svg on each side.
Like this:
+OUTER SVG------------------------------------------+
| |
| +INNER SVG----------------+ |
| | | |
| | | 200px |
| | | <---+-----+----> |
| | | |
| | | | 1
| | | | 0
| | | | 0
| | | | %
| | | |
| | | | h
| | | | i
| +-------------------------+ | g
| | h
| |
+---------------------------------------------------+
100% Wide
Is it possible to do this with SVG alone?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我理解正确的话，这是微不足道的。 SVG 被构建为在 Z 堆栈中包含许多视觉元素，对齐、重叠等等。
使用免费开源的 Inkscape 创建 SVG，然后如果您想查看 SVG 是如何形成的，可以直接在文本编辑器中编辑文件。在 Inkscape 中，您可以使用对齐工具、网格、变换缩放工具、拖放以及可能的其他一些工具来完成此操作。
If I understand you correctly, this is trivial. SVG is built to have many visual elements in a Z stack, aligned, overlapped, whatever.
Use Inkscape, free and opensource, to create SVGs, and then you can edit the file directly in a text editor if you want to see how SVG is formed. In Inkscape you can use the alignment tools, the grid, the transform-scaling tool, drag and drop, and probably some other tools to accomplish this.