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

【问题标题】：SVG image generated in browser different in Illustrator在 Illustrator 中不同的浏览器中生成的 SVG 图像
【发布时间】：2014-05-23 06:29:15
【问题描述】：

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

我生成的 SVG 在任何浏览器中都能正常工作。但是，当我下载其中一个 SVG 并尝试在 Adobe Illsutrator 中打开它时，所有的转换都已完成。

实际上它们是如此不同，以至于您必须将其缩小才能看到形状的位置。

这是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 会以如此不同的方式呈现给浏览器。

有人知道为什么会这样吗？

编辑

这就是它在 Illsutrator 中的样子，你可以看到缩放和定位都关闭了，中间的小方块是 592 x 592 的画布区域，所以你可以看到我被缩小了多远。

【问题讨论】：

我没有 Illustrator 来测试它，但我的第一个建议是尝试在最外面的 <svg> 的宽度和高度值中添加一些单位 (px)。
好主意但没有雪茄，我在所有测量单位中添加了 px，它改变了但看起来仍然很疯狂
你能发一个截图来帮助我们理解“疯狂”是什么意思吗？仅供参考，Inkscape 的布局没有问题（尽管它不喜欢你的透明黑色填充颜色！）
好吧，我想它在 Inkscape 中看起来还不错，也许我应该再考虑一下透明的黑色填充...无论如何我已经添加了它的屏幕截图。
您可以尝试添加一个 viewBox (justinmccandless.com/blog/…)，不确定是否会有所帮助，但可能会。

标签： svg vector-graphics adobe-illustrator

【解决方案1】：

我怀疑 AI 不喜欢/处理/期望嵌套的 <svg> 元素。尝试用组替换它们。具有x 和y 属性的用户可能需要添加transform 以使其看起来相同。此外，如果overflow 很重要，您可能需要进一步调整，因为该属性对组元素无效。

【讨论】：

感谢组的额外信息溢出/转换。