SVG 悬停过渡
SVG hover with transition
我最近开始学习 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>
如果可能的话,我希望当我将鼠标悬停在圆圈上时圆圈变小,文字消失。我实现了让它变小,但我想把过渡看起来不错。如果有人可以提供帮助,我将不胜感激。
要为文本的不透明度和位置设置动画,请使用 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>
我最近开始学习 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>
如果可能的话,我希望当我将鼠标悬停在圆圈上时圆圈变小,文字消失。我实现了让它变小,但我想把过渡看起来不错。如果有人可以提供帮助,我将不胜感激。
要为文本的不透明度和位置设置动画,请使用 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>