Question

我只想找到一种在iOS应用中使用swiffy输出的HTML5动画的方法，但我不能放弃灰色背景。我认为这将是一种放弃动画并避免在视网膜iPad显示器上使用png的存储问题的方法。现在我不能让背景清晰。我该怎么办？

Answer 1

在Swiffy生成的代码中，查找backgroundColor并将其删除，包括其值。

Answer 2

删除backgroundColor：元素对我来说不起作用，直到我发现Google已经破坏了在当前版本的Swiffy运行时中执行此操作的能力。如果你也改变了：

SRC = “https://www.gstatic.com/swiffy/v5.2/runtime.js”

到

SRC = “https://www.gstatic.com/swiffy/v5.1/runtime.js”

在文件的顶部，你会发现透明背景正常工作（当然，5.2库中的任何增强功能都不再可用）。

编辑：Michael Prescott指出，由于Swiffy转换器版本与运行时之间不匹配，此解决方案无法可靠运行。不依赖于5.1导出器存在的替代解决方案是建立在此处建议的其他解决方案上。尝试将以下函数添加到脚本中。它轮询以查看Swiffy对象何时安装了它的首选背景颜色，然后它将替换它。

(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";
    }
})();

当Swiffy首次设置稳固背景然后被替换时，这似乎并没有出现故障。但是，为了更加确定，您可以启用注释掉的行来隐藏第一个节点，直到设置了正确的透明度。

最好的问候

Answer 3

尝试定位具有纯色背景的元素并将其动态更改为透明，如下所示：

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

或者没有

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

Answer 4

这对我来说都不起作用（使用版本5.2），通过设置新样式解决：

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

Answer 5

根据http://css-tricks.com/override-inline-styles-with-css/，你可以使用这个CSS hack

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

Answer 6

将此添加到您的css或类似的东西。

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

Swiffy输出透明背景

6 个答案: