0
과 함께 SVG로 작성된 (간단한)로드 이미지 작업 중입니다. Chrome과 Firefox에서 제대로 작동하지만 Safari에서 제대로 작동하지 않는 것 같습니다.변환 문제가있는 SVG CSS 키 프레임 애니메이션
사파리 (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>
내가 사용중인 Safari에는 접두어가 필요하지 않습니다. 그들을 삭제하고 [Codepen에 올렸습니다] (https://codepen.io/boasthin/pen/Bmezmv) 이상한 일은 사각형이 움직이지만 텍스트 요소가 움직이지 않는다는 것입니다. –