在Illustrator中生成的SVG图像不同

Question

我正在编写一个在浏览器中生成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画布区域，所以你可以看到我缩小了哪个。< / p>

Answer 1

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