Phonegap Android内联SVG

时间:2012-12-07 23:54:43

标签: android cordova svg svg-filters

我正在使用Phonegap开发一款仅在Nexus 7上使用的Android应用程序。

在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>

1 个答案:

答案 0 :(得分:2)

Nexus 7的嵌入式webview仍然是Android 4x浏览引擎 - 它不支持过滤器。

相关问题