SVG hover с переходом

Question

Недавно я начал изучать SVG. Я попытался сделать круг с текстом внутри. вот мой код:

<div class="main_circle"> 
     <a href="#"> 
      <svg height="392" width="392" id="svg_circle"> 

       <circle cx="196" cy="196" r="194" class="circle1" id="circle1"/> 

       <text x = "70" y = "100" font-size = "30" fill="#fff"> 
        <tspan font-family = "'Ubuntu', sans-serif" font-weight = "100"> 
         some text 
        </tspan> 
       Sorry, your browser does not support inline SVG. 
      </svg> 
     </a> 

     <script> 
      $("#svg_circle").hover(function() { 
        $("#circle1").attr({r:"150"}); 
      }); 


      $("#svg_circle").mouseleave(function() { 
        $("#circle1").attr({r:"194"}); 
      }); 
     </script> 

    </div> 

я хотел бы круг, чтобы быть меньше, когда я парить его и текст, чтобы исчезнуть, если это возможно. я достиг, чтобы сделать его меньше, но я бы хотел, чтобы переход выглядел красиво. если кто-то может помочь, я был бы признателен.

Answer 1

Чтобы анимировать непрозрачность и положение текста, сгруппируйте circle и text с помощью тега g. Приложите к группе :hover событие, ожидание #textfill-opacity от 1 до 0 и transform: translate(0, -100px), чтобы перейти на 100px выше.

И анимировать атрибут rcirlce вы могли бы использовать в animate тег и запустить анимацию на mouseenter и mouseleave событий через JavaScript.

var shape = document.getElementById('shape'); 
 
shape.addEventListener('mouseenter', function() { 
 
    document.getElementById('shrink').beginElement(); 
 
}); 
 
shape.addEventListener('mouseleave', function() { 
 
    document.getElementById('grow').beginElement(); 
 
});

#shape #text { 
 
    transition: all 0.5s ease; 
 
} 
 
#shape:hover #text { 
 
    fill-opacity: 0; 
 
    transform: translate(0, -100px); 
 
}

<div class="main_circle"> 
 
    <svg height="392" width="392" id="svg_circle"> 
 
    <g id="shape"> 
 
     <a xlink:href="#"> 
 
     <circle cx="196" cy="196" r="194" class="circle" id="circle" /> 
 
     <animate id="shrink" xlink:href="#circle" attributeType="XML" attributeName="r" from="194" to="150" dur="0.5s" begin="indefinite" fill="freeze" repeatCount="1" /> 
 
     <animate id="grow" xlink:href="#circle" attributeType="XML" attributeName="r" from="150" to="194" dur="0.5s" begin="indefinite" fill="freeze" repeatCount="1" /> 
 
     <text id="text" font-family="'Ubuntu', sans-serif" opacity="1" font-weight="100" x="196" y="196" text-anchor="middle" font-size="30" fill="#fff">Some text</text> 
 
     </a> 
 
    </g> 
 
    </svg> 
 
</div>