SVG에서 이미지를 움직이는 방법 (CSS 사용)

Question

이미지가있는 svg가 있는데 CSS로 애니메이션을 만들 수 있습니까?

나는 이상한 소리가 들려 왔지만 조금 이상하게 움직이고있다. 그러나 그때 나는 이상하게 들릴지 모르겠다. 내가 CSS3 애니메이션에서 본 바운스 효과.

누구나 svg (텍스트 문자 내부의 png) 내부에서이 작업을 수행 할 수있는 방법에 대한 아이디어가 있습니까?

JSFiddle에서 보는 것보다 사이트에서 더 멋지게 보입니다. 어떤 이유로 약간 흐리게 보입니다.

SVG 코드 : 나는 SVG에 대한 태그를 발견하지만 이미지를 회전하거나 그것을 이동을 할 수 없을 것입니다

그래서 UPDATE

<svg width="50px" height="50px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="width: 50px;height: 50px;"> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" x="0" y="0" width="50" height="50"></image> 
     </pattern> 
    </defs> 
<text x="0" y="0" font-size="59" fill="url(#img1)"> 
     <tspan x="-1" y="49">▼</tspan> 
    </text> 

</svg> 

없음 JS 또는 프레임 워크 PLZ 주위의 객체를 움직이지 않고 주위를 둘러 볼 필요가 없습니다. (예 : 삼각형, 저는 뒤에서 무엇이 아닌 ...)

바이올린은 이제 불투명하게 움직입니다. 2 Randak이 내 사이트에 흐릿하게 보이는 코멘트 말한다 UPDATE, 나는 최신 안정 크롬 (크롬 OS)하고 크고 작은 잘 보이는 ...

에있어

) 완전 불투명

Answer 1

아마도 "점프"하는 것은 크기 조정시 다른 글꼴 크기로 스냅하는 것입니다. 잘하면이 문제를 해결하려면 text-rendering: geometricPrecision을 사용할 수 있습니다. 그러나 모양이 삼각형 인 경우 <path> 요소를 대신 사용하는 것이 좋을까요? 그것은 일반적으로 더 좋으며 항상 부드럽게 전환됩니다.

다음은 패턴이있는 경로 요소를 사용하는 예입니다. http://jsfiddle.net/N7njg/ (불행히도 패턴의 x 속성에 애니메이션을 적용하면 버그가 발생합니다.)