的PhoneGap Android的在線SVG

Question

我使用的PhoneGap開發一個Android應用程序，只將要上的Nexus 7

使用在index.html的我有一個內嵌SVG，吸引了一些不錯的圈，做了脈衝效應。

它在計算機上的Chrome和Nexus 7上的Chrome中運行良好。 但是，當我編譯.apk或讓Eclipse將應用程序的調試版本推送到設備時，svg不顯示。

的應用程序和所有其他菜單元素的背景圖像顯示爲好，只是在SVG區域的所有項目，中間不會出現。

下面是SVG代碼段：

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="100%" height="100%" viewBox="0 0 800 1205"> 

<radialGradient id = "blipPulse" cx = "50%" cy = "50%" r = "50%"> 

    <stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "0.2"> 
     <animate attributeName="stop-opacity" begin="0s" dur="3s" values="1;0;1" repeatCount="indefinite" /> 
    </stop> 
    <stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "1"> 
     <animate attributeName="offset" begin="0s" dur="3s" values="0;1;1;0" repeatCount="indefinite" /> 
     <animate attributeName="stop-opacity" begin="0s" dur="3s" values="0;1;0;0" repeatCount="indefinite" /> 
    </stop> 

    <stop stop-color = "#3ddeed" offset = "2" stop-opacity = "0"> 
</radialGradient> 
<defs> 
    <g id="blip"> 
    <circle cx = "0" cy = "0" r = "20" fill = "url(#blipPulse)" stroke = "#3ddeed" stroke-width = "2" opacity="0.3"/> 
    <circle cx = "0" cy = "0" r = "7" fill = "#3ddeed" stroke = "none" stroke-width = "0"/> 
    </g> 
    <path id="hex" d="m 0 -60 L 52 -30 L 52 30 L 0 60 L -52 30 L -52 -30 L 0 -60" fill="rgba(255,255,255,0.15)" /> 
</defs> 

<radialGradient id = "g1" cx = "50%" cy = "50%" r = "50%"> 
    <stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "0"/> 
    <stop stop-color = "#3ddeed" offset = "60%" stop-opacity = "0"/> 
    <stop stop-color = "#3ddeed" offset = "86%" stop-opacity = "0.1"/> 
    <stop stop-color = "#3ddeed" offset = "100%" stop-opacity = "0.25"/> 
</radialGradient> 
<filter id = "fearth" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/earth.png"/> 
</filter> 
<filter id = "fasteroid1" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/ice1.png"/> 
</filter> 
<filter id = "fasteroid2" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/ice2.png"/> 
</filter> 
<filter id = "fasteroid3" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/iron1.png"/> 
</filter> 
<filter id = "fasteroid4" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/iron2.png"/> 
</filter> 
<filter id = "ffleetcolor" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/fleeticoncolor.png"/> 
</filter> 
<filter id = "ffleetgray" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/fleeticongray.png"/> 
</filter> 
<filter id = "fdeployarrow" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "assets/Asteroids/deployarrow.png"/> 
</filter> 

<g id="mapcenter" transform="translate(400,600)"> 
<g id="map" transform="scale(1) translate(0,0)"> 
<circle cx="-800" cy="0" r="800" id="orbit" /> 
<circle id="rangering" cx="0" cy="0" r="400" fill="url(#g1)" transform="scale(0)" /> 
<g id="blips"> 
    <use id="loc0" x = "100" y = "150" xlink:href = "#blip" opacity="0" /> 
    <use id="loc1" x = "-180" y = "110" xlink:href = "#blip" opacity="0" /> 
    <use id="loc2" x = "230" y = "-70" xlink:href = "#blip" opacity="0" /> 
</g> 
<circle cx="0" cy="0" r="17" fill="blue" filter="url(#fearth)" id="earth" /> 
<g id="asteroidfield" transform="translate(100,150) scale(0.05)"> 
    <circle cx="48" cy="-146" r="25" fill="grey" filter="url(#fasteroid1)" id="asteroid1" /> 
    <circle cx="-120" cy="-230" r="25" fill="grey" filter="url(#fasteroid2)" id="asteroid2" /> 
    <circle cx="190" cy="90" r="25" fill="grey" filter="url(#fasteroid3)" id="asteroid3" /> 
    <circle cx="-277" cy="270" r="25" fill="grey" filter="url(#fasteroid4)" id="asteroid4" /> 
</g> 
<g id="asteroidinfo"> 
    <rect x="-30" y="-105" width="60" height="45" fill="red" filter="url(#fdeployarrow)" id="deployarrow" /> 
    <circle cx="0" cy="-125" r="45" fill="blue" filter="url(#ffleetcolor)" id="fleetcolor" /> 
    <circle cx="0" cy="0" r="45" fill="blue" filter="url(#ffleetgray)" id="fleetgray" /> 
    <g id="h2ohex" transform="translate(108,-125)"> 
     <use id="h2ohex" xlink:href = "#hex" opacity="1" /> 
     <text x = "0" y = "0" class="hexValue">60</text> 
     <text x = "0" y = "30" class="hexLabel">H<tspan baseline-shift = "sub" font-size="0.7em">2</tspan>O</text> 
    </g> 
    <g id="fehex" transform="translate(180,0)"> 
     <use xlink:href = "#hex" opacity="1" /> 
     <text x = "0" y = "0" class="hexValue">50</text> 
     <text x = "0" y = "30" class="hexLabel">Fe</text> 
    </g> 
    <g id="pthex" transform="translate(108,125)"> 
     <use xlink:href = "#hex" opacity="1" /> 
     <text x = "0" y = "0" class="hexValue">10</text> 
     <text x = "0" y = "30" class="hexLabel">Pt</text> 
    </g> 
</g> 

</g> 
</svg> 

Answer 1

了Nexus 7的嵌入式網頁視圖仍然是Android 4X瀏覽引擎 - 它不支持過濾器。