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个活动附加到论坛，为#text的{{1}} fill-opacity 1和0设置transform: translate(0, -100px)，以移至100px上面。

为了动画r的{{1}}属性，您可以使用cirlce标记，并通过animate和mouseenter事件开始动画的JavaScript。

mouseleave

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);
}

SVG悬停在转换状态

1 个答案: