我将javascript样式更改触发的css转换应用于svg g元素。转换在我的浏览器Chrome上完美运行,并且转换适用于两个属性更改。但是在我的JAVAFX Web视图中,过渡属性会相互干扰。
CSS
#viewBox[data-focus-state=off] g{
opacity:0;
}
#viewBox[data-focus-state=on] g{
opacity:1;
}
#viewBox g{
-webkit-transition: .7s;
}
HTML
<svg id="viewBox" viewBox="0 0 352 182" preserveAspectRatio="none" data-focus-state="off">
<g style="-webkit-transform: translate(310px, 45px);">
<circle r="10" cy="0" cx="0" style="fill: rgb(151, 215, 241);" ></circle>
<text transform="translate(-170, 0)">Testing</text>
</g>
</svg>
在javascript中,我只需切换data-focus-state属性以触发不透明度变化,同时还将style属性设置为新的变换平移与新坐标。
有谁知道这是否是特定于JAVAFX webview的问题?我尝试研究它的webkit版本,但我找不到任何表明不支持同一元素上的并发css转换的东西。
的 * UPDATE
事实证明,现在支持同步CSS动画,但是对svg元素应用过滤器仍会导致事情中断。