2016-11-28 2 views
0

그래서 SVG 애니메이션을 배우고 있습니다.: svg가 외부 파일에있을 때 svg에서 호버링이 작동하지 않습니다.

기본적으로 내가하려는 것은 원의 색상을 변경하는 것입니다.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 437.1 294.4" style="enable-background:new 0 0 437.1 294.4;" xml:space="preserve"> 

    <style type="text/css"> 

     .st0:hover { 
      fill: red; 
     } 

    </style> 

    <g id="Circle"> 
     <path class="st0" d="M291.3,147.4c0,77-62.4,139.4-139.4,139.4S12.5,224.4,12.5,147.4C12.6,70.4,75,8,151.9,8 
     C228.9,8,291.3,70.4,291.3,147.4"/> 
    </g> 

</svg> 

이것은 svg 코드가 html 파일 내에있을 때 예상대로 작동합니다.

그러나 내가 그것을 svg 파일 안에 넣고 img 태그를 사용하여 호출하면 호버 효과가 더 이상 작동하지 않습니다.

<img class="logo" src="url/logo.svg"> 

HTML 내부에 svg 코드를 삽입하지 않고이 작업을 수행 할 수있는 방법이 있습니까?

감사합니다.

+0

알아 냈어 ...이 기사가 도움이되었다. https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ –

답변