某些 SVG 未在 Windows Phone 8.1 (PhoneGap) 中显示

Question

首先，我知道我的问题 not about it 的起始 XML 标记的问题。

我有许多多层 .ai 文件 (Adobe Illustrator CC 2015 19v) 每一层都是复制前一层+一些变化。 (something similar to this)

• 如果我保存顶层，它会完美地显示在所有设备上。 （桌面、安卓、WP8.1）

• 如果我保存较低层，它不会显示在 WP 8.1 中。

我尝试保存不同的选项，但没有任何改变。每个 .ai 文件都会发生这种情况。

然后我决定探索 svg 文件的文本表示。如果我从非顶层的顶层复制样式，那么一切正常。它们被显示出来。

开始 SVG 文件 TOP LAYER (7/7) - （显示）

<svg id="lesson_2_7" data-name="lesson 2 7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style>

启动 SVG 文件 NONTOP LAYER (5/7) -（不显示）

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff7f7;}</style>

从 TOP (5/7) 开始带有样式的 SVG 文件 NONTOP LAYER - （显示）

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style>

好像没有足够的样式来显示图像。

I downloaded the entire SVG for example here.

有人遇到过类似的吗？我很高兴有任何想法。也许，需要配置 AI 以进行导出？

Answer 1

PhoneGap 中的 IE 不渲染具有