-1

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

移动的

应该如何

桌面

我尝试优化文件，因为我从 Adob​​e Fireworks 导出它；没运气。

来源粘贴箱：http: //pastebin.com/jyrTf5kb

4

1 回答 1

0

这有点远，但请尝试稍微简化 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/

于 2013-10-14T05:23:13.530 回答