javascript - SVG ViewBox 构造

Question

我正在尝试从具有多个路径元素的正确显示的 svg(svg1) 复制 svg 路径。我基本上试图通过创建一个新的 svg 元素（svg2）并附加路径来复制一个路径。但我遇到的问题是我复制到 svg2 的路径很大，我希望它在 svg1 中时得到适当的大小。

我一直在尝试为这个元素构造一个新的 viewBox，因为 svg1 有一个 viewBox 但我不能使用它，因为 svg1 中的 viewBox 是用于多个路径元素而不是一个。关于如何解决这个问题的任何想法？

Answer 1

我从您添加的“javascript”标签中假设您正在尝试从 javascript 执行此操作？

我认为没有 DOM 函数可以做到这一点，因此您需要自己循环遍历“d”属性中的坐标。如果您可以假设没有“a/A”、“v/V”或“h/H”路径命令，则读取每对 X、Y 坐标并跟踪最小和最大 X 和 Y。然后创建你的 viewBox 来自那些。

这将导致 viewBox 在某些情况下可能有点太大，但它永远不会小于真正的边界框。