SVG图像在移动设备上丢失元素

Question

我的SVG图像在桌面上正确加载，但在Firefox for Android上，它会被剪切，如下所示：

它应该如何

我尝试优化文件，因为我是从Adobe Fireworks导出的;没有运气。

来源的Pastebin：http://pastebin.com/jyrTf5kb

Answer 1

这是一个很长的镜头，但尝试简化SVG。当它不需要时，它使用剪辑路径。例如，第一个对象定义如下：

<g>
    <defs>
            <path id="SVGID_3_" d="M66.676 498.582 ...snip..."/>
    </defs>
    <clipPath id="SVGID_4_">
            <use xlink:href="#SVGID_3_" overflow="visible"/>
    </clipPath>
            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="0.4" y1="792" x2="1.4" y2="792" gradientTransform="matrix(-8.100000e-006 185.5313 185.5313 8.100000e-006 -146838.8125 418.0006)">
            <stop offset="0" style="stop-color:#281464"/>
            <stop offset="1" style="stop-color:#A863FF"/>
    </linearGradient>
    <rect x="48.1" y="489" clip-path="url(#SVGID_4_)" fill="url(#SVGID_5_)" width="107.6" height="185.5"/>
</g>

何时可以简化为：

<path id="SVGID_3_" d="M66.676 498.582 ...snip..." fill="url(#SVGID_5_)"/>

<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="0.4" y1="792" x2="1.4" y2="792" gradientTransform="matrix(-8.100000e-006 185.5313 185.5313 8.100000e-006 -146838.8125 418.0006)">
   <stop offset="0" style="stop-color:#281464"/>
   <stop offset="1" style="stop-color:#A863FF"/>
</linearGradient>

这只是猜测，但剪辑路径可能存在错误。

尝试使用此简化文件，看看它是否有效：http://jsfiddle.net/YFWcg/1/