Swiffy output transparent background

荒凉一梦 提交于 2020-01-06 07:54:39

问题


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"

to

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!