Illustrator中不同浏览器中生成的SVG图像

我正在编写一个在浏览器中生成SVG图像的web应用程序

我正在生成的SVG在任何浏览器中都可以正常工作。然而，当我下载一个SVG并尝试在AdobeIllsutter中打开它时，所有的转换都是到处都是

事实上，它们是如此的不同，以至于你必须直接缩小以查看形状的位置

这是SVG的内容，您可以看到它非常简单。只有几个嵌套的SVG和几个基本形状：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="592" height="592" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg style="overflow:visible;" x="88.80000305175781" y="88.80000305175781" fill="#777777">
    <svg style="overflow:visible;" height="100px" width="100px">
      <rect width="100" height="100" style="stroke:#006600;" transform="scale(4.144 4.144)"></rect>
    </svg>
  </svg>
  <svg style="overflow:visible;" width="592" height="592" x="176.60000000000016" y="177.60000000000014" fill="#000000">
    <rect width="592" height="592" fill="rgba(0,0,0,0)" stroke="#bbbbbb" transform="scale(0.4 0.4)"></rect>
    <svg style="overflow:visible;" x="-0.0000015258789005656581" y="-0.0000015258789005656581">
      <svg style="overflow:visible;" height="48px" width="48px">
        <ellipse id="SvgjsEllipse1010" rx="24" ry="24" cx="24" cy="24" style="stroke:#006600;fill:#00cc00;" transform="scale(4.933333333333334 4.933333333333334)"></ellipse>
      </svg>
    </svg>
  </svg>
</svg>

我不完全了解SVG规范，但我正在做一些特别复杂的事情，所以对我来说一切都很好。我看不出为什么Illustrator会对浏览器呈现出如此不同的效果

有人知道为什么会这样吗

编辑

这是Illsutter中的样子，因为你可以看到缩放和定位都关闭了，中间的小正方形是592 x 592画布区域，所以你可以看到我被放大了多远

---

我怀疑AI不喜欢/处理/期望嵌套的

元素。尝试将它们替换为组。那些具有

x

和

y

属性的人可能需要添加一个

transform

，以使其看起来相同。另外，如果

溢出

很重要，您可能需要进一步调整，因为该属性对组元素无效。

我没有Illustrator来测试它，但我的第一个建议是尝试在最外层的

上向宽度和高度值添加一些单位（px）。想法不错，但没有雪茄，我在所有的测量单位中加入了像素，它改变了，但看起来仍然很疯狂。你能发布一个屏幕截图来帮助我们理解“疯狂”的含义吗？仅供参考，Inkscape的布局没有问题（尽管它不喜欢你的透明黑色填充颜色！）我想它在Inkscape中看起来不错，也许我应该再考虑一下透明黑色填充…我已经添加了一个屏幕截图。你可以尝试添加一个viewBox（），不确定这是否有帮助，但可能会。感谢您为组提供的额外信息溢出/转换。