jquery - SVG 悬停过渡

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

要为文本的不透明度和位置设置动画，请使用 g 标记将 circle 和 text 分组。将 :hover 事件附加到该组，将 #text 的 fill-opacity 从 1 动画化为 0 和 transform: translate(0, -100px) 移动到上面的 100px。

要为 cirlce 的 r 属性设置动画，您可以使用 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>