SVG动画在Safari：翻译操作不支持

2017-02-24 47 views 0 likes

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 

<style type="text/css"> 
    text { font-size: 400%; } 

    @keyframes basic { 
     0% { transform: translateY(-100px); opacity: 0; } 
     100% { transform: translateY(100px); opacity: 1; } 
    } 

    .basic { animation: basic 1s linear infinite; } 
</style> 
    <title>SVG Animation using CSS: Bounce</title> 

    <text class="basic" x="150" y="200">SVG</text> 
    <text x="100" y="200">–</text> 

</svg>

JSFiddle here

它动画就好在Firefox和Chrome。然而，在Safari中，只有不透明属性是动画的，只有第一个translateY（即0％）被考虑在内。

（在Safari版本10.0.3测试）使用完全相同的CSS和应用它们在HTML文档中，为<p>例如动画做工精细无处不在，包括Safari。

Safari不支持SVG中translate的动画吗？我在哪里可以检查它是否受支持？

来源

2017-02-24 Fabien Snauwaert

回答

Safari不支持<text>元素的动画！包装一组内的文本修复该问题：

<g class="basic"> 
    <text x="150" y="200">SVG</text> 
</g>

JSFiddle

然而，这并不回答第二个问题，一个在哪里可以检查属性是否是动画还是没有在理论上和实践中？

来源

2017-02-24 11:56:45

SVG动画在Safari：翻译操作不支持

回答

相关问题