Swiffy output transparent background

问题

I'm just trying to figure out a way to use a swiffy outputted HTML5 animation in an iOS app but I can't drop the grey background. I thought this would be a way to drop animations in and circumvent the storage issues of using a png on a retina iPad display. Now I can't make the background clear. What should I do?

回答1:

In the code that Swiffy generated, look for backgroundColor and remove it including its value.

回答2:

Try to locate element with solid background and change it dynamically to transparent, like this:

document.getElementById('swiffycontainer').childNodes[1].style.background = "rgba(255, 255, 255, 0)";

or to none

document.getElementById('swiffycontainer').childNodes[1].style.background = "none";

回答3:

Removing the backgroundColor: element did not work for me until I discovered that Google have broken the ability to do this in the current version of the Swiffy runtime. If you also change:

src="https://www.gstatic.com/swiffy/v5.2/runtime.js"

src="https://www.gstatic.com/swiffy/v5.1/runtime.js"

at the top of the file you should find that the transparent background works correctly (although, of course, any enhancements in the 5.2 library won't be available any more).

EDIT: It has been pointed out by Michael Prescott that this solution won't work reliably because of a mismatch between the Swiffy converter version and the runtime. An alternative solution that doesn't depend on the presence of the 5.1 exporter is to build on the other solutions suggested here. Try adding the following function to the script. It polls to see when the Swiffy object has installed it's preferred background color and then it replaces it.

(function() {
    var firstNode=document.getElementById('swiffycontainer').childNodes[1];
    //firstNode.style.visibility = "hidden";
    if (firstNode.style.background=="") {
        setTimeout(arguments.callee, 10);
    } else {
        firstNode.style.background = "none";
        //firstNode.style.visibility = "visible";
    }
})();

This doesn't seem to show a glitch when Swiffy first sets a solid background and then it gets replaced. However to be more certain you can enable the commented out lines to hide the first node until the correct transparency has been set.

best regards

回答4:

None of this worked for me (using ver 5.2), solved by setting new style:

<script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);      
    stage.start();
</script>
<style> 
    div {background: url("../bgimg.jpg") repeat scroll 0 0 transparent !important;} 
</style>

回答5:

According to http://css-tricks.com/override-inline-styles-with-css/ , you can use this CSS hack

div[id=swiffycontainer] > div{
    background-color: transparent!important;
}

回答6:

Add this to your css or something similar.

#containerdivid svg > g > g > rect {
    display: none;
}

来源：https://stackoverflow.com/questions/12766385/swiffy-output-transparent-background

标签

ios

cocoa-touch

background

google-swiffy