SVG를 사용하여 X, Y 또는 Z에 마우스를 올려 X 및 Z를 회전시킵니다.

Question

내 웹 페이지에 다른 세 가지 요소가 포함 된 요소 (로고)가 있습니다. 전체 로고가 맴돌 았을 때, 로고 내의 두 요소 (문자 중 두 개)는 무기한으로 중심을 중심으로 회전합니다.

나는 CSS 애니메이션을 사용하여 회전 요소를 얻었으나, 그 자체가 움직일 때만 요소를 회전시킬 수 있습니다. 세 요소 중 하나라도 CSS를 사용하여 끌면 여러 요소를 회전시키는 방법을 알 수 없습니다.

나는 자신의 svg 태그에 데이터 URI로 3 개의 요소를 가지고 있는데, 그 중 하나는 홈 페이지에 링크 된 href에있다. 나는 또한 스크립트 SnapSVG 콘텐츠 소스뿐만 아니라 SnapSVG 소스 코드에 연결해야하는 HTML 문서에서

<header><a id="logoLink" href=""> 

<g class="logoSvg"> 

<svg id="c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.68 37.2"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo</title><path class="cls-1" d="... 
</svg> 
<svg id="hri" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.88 79.53"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo copy</title><path class="cls-1" d="M 
</svg> 
<svg id="s" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.19 37.2"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo copy 2</title><path class="cls-1" d="M 
</svg> 

</g> 

</a> 

:

<script src="js/logoAni.js"></script> 

을 SnapSVG JS 다음과 같습니다

var logo = $("#logoSvg"); 
var c = $("#c"); 
var hri = $("#hri"); 
var s = $("#s"); 

function rollover(){ 
    c.transform('r0,100,100'); 
    c.animate({transform: "r360,100,100"},1000,mina.linear,anim); 
    s.transform('r0,100,100'); 
    s.animate({transform: "r360,100,100"},1000,mina.linear,anim); 
} 

logo.hover(rollover); 

스냅 코드가 잘못되었다고 가정합니다. 아마 나는 스냅을 전혀 사용할 필요가 없을 것입니까?

업데이트 : 다음은 자바 스크립트없이 이런 식으로 뭔가를 달성하기 위해 SCSS에서 @keyframes animation 및 중첩 스타일을 사용할 수있는 최근 jfiddle https://jsfiddle.net/Lc12bvyn/

Answer 1

롤오버 코드 자체가 괜찮아 보입니다. (여전히 코드가 없다고 가정하면 jsfiddle 또는 jsbin을 올릴 것입니다.) 잘못된 유형의 요소에만 적용됩니다.

jquery를 사용중인 것으로 추측하고 있습니다. 그렇다면, 나는

var logo = $("#logoSvg"); 

에

var logo = Snap("#logoSvg"); 

당신이 (DOM 요소에 링크) 스냅 요소를 얻을 것이다이 방법을 시도 ..하는 것보다 work..rather 것이다 확실하지 않다 DOM 또는 jquery 객체가 아닌 조작 할 수 있습니다.

일반적으로 'svg'요소 자체를 변환 할 수 없습니다 (기술적으로 변환 속성을 지원하지는 않습니다).

그래서 두 개의 svg를 g/group 요소 내부로 변환하고 해당 g 요소를 변형하려고합니다.당신은 CSS로 볼 수 있지만 CSS는 항상 브라우저 지원에 관해서는 좋지는 않지만, 데이비드 (Davids) 응답은 정상적인 요소에 좋을 수도 있지만, svg 요소 (특히 로테이션)에는 좋을지 모르겠다. 당신이 그 방법을 시도한다면 다른 브라우저를 아주 일찍 테스트하십시오.

Answer 2

입니다. 당신이이 길을 가고 싶어하는지 확실하지 않지만 그것은 나에게 가장 똑바로 보인다.

특히 회전하려는 요소에서 animation-iteration-count을 무한대로 설정하려고합니다.

은 아래 코드 등 좀 거친 개념 물건이 아니라 당신이 설정 찾고있는 애니메이션, 또는 요소의 전체 맥락이다

.logoSvg { 

    &:hover { 

    &:first-child { 
     animation-name: someAnimation; 
     animation-iteration-count: infinite; 
    } 

    &:last-child { 
     animation-name: someAnimation; 
     animation-iteration-count: infinite; 
    } 
    } 
} 

@keyframes someAnimation { 
    0%: {transform: some transformation}; 
    100%: {transform: some transformation}; 
} 

나는이 도움이 크리스, 또는 희망 적어도 올바른 방향으로 갈 수 있습니다.