変換問題のあるCSSキーフレームアニメーション（<text>と<rect>）

Question

私は（単純な）読み込みイメージで作業しています。SVGで、一部のCSSアニメーションで作業しています。 ChromeとFirefoxでは正常に動作しますが、Safariで動作させることができません。

これはSafari（11.0.1）の問題ですか、紛失しているものがありますか？シンプルなSVGの四角形はきれいにアニメートされますが、テキストは何もしません。

もし誰かがそれが大いに感謝されるのを助けることができたら。

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 300" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
    <style> 
     .oeps { 
      font-family: 'SketchRockwell', 'Sketch Block', sans-serif; 
      font-size: 120px; 
     } 
     .balk { 
      -webkit-animation: vallen 1s ease-in-out infinite; 
      animation: vallen 1s ease-in-out infinite; 
     } 
     .tekst1 { 
       -webkit-animation: vallen 1s ease-in-out infinite; 
       animation: vallen 1s ease-in-out infinite; 
      } 
     @keyframes vallen { 
      0% { transform: translate(0px, 0px)} 
      50% { transform: translate(20px, 0px)} 
      100% { transform: translate(0px, 200px)} 
     } 
    </style> 
    <rect x="0" y="0" width="1400" height="340" fill="rgb(227,6,19)"/> 
    <g class="oeps" style="transform: translate(700px, 60px);"> 
     <text class="tekst1" x="-200" y="120" fill="white">O</text> 
     <rect class="balk" x="-200" y="80" width="75" height="4" fill="#ffffff" stroke="#494949"/> 
    </g> 
</svg> 

Answer 1

は、私はあなたがアニメーションCSSプロパティのプレフィックスバージョンを使用している参照してください。-webkit-animation。あなたは、あなたも@keyframesの接頭辞バージョンを使用することを必要ないとき：

@-webkit-keyframes vallen { 
    ..etc.. 
} 

を今、私はあなたがサポートにこれらのプロパティの接頭辞バージョンを使用したりしていないのSafariのバージョンかどうかわからないんだけど、それを試してみてください。多分それがあなたの問題です。