SVG使用animateTransform小心缩放悬停类效果 [英] SVG Carefully scale hover-kind effect using animateTransform
本文介绍了SVG使用animateTransform小心缩放悬停类效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用SVG SMIL动画制作悬停效果。
需要纠正mouseover和mouseout：mouseover = scale + 15％andopacity-50％和mouseout reverse。
当鼠标悬停在不同的元素上时没有跳转到我的敏感矩形。
谢谢
I'm trying to make hover effect with SVG SMIL animation. Need to correct mouseover and mouseout: mouseover=scale+15%andopacity-50% and mouseout reverse. Without jumps while mouseover on separate elements into my sensivity rectangle. Thank you
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<!-- switched off -->
<g id="dscn.n" cursor="pointer">
<g>
<g>
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white" stroke-width="0.0" />
<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round"/><!-- left vertical -->
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />
<line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" /><!-- off -->
</g>
<!--<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5" dur = "0.2s/>-->
<animate id="animation1"
attributeName="stroke-opacity"
from="1" to="0.5" dur="1s"
begin="mouseover" fill="freeze" />
<animate id="animation2"
attributeName="opacity"
from="0.5" to="1" dur="1s"
begin="animation1.end" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze" additive="sum"/>
</g>
</g>
</g>
</defs>
<line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
<g transform="translate(-200,-200)" >
<title>dscn.n</title>
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#dscn.n" />
</g>
</g>
</svg>
</body>
推荐答案
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<g id="dscn.n" cursor="pointer">
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white" stroke-width="0.0" />
<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round" pointer-events="none"/><!-- left vertical -->
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" pointer-events="none" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" pointer-events="none" />
<line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" pointer-events="none" /><!-- off -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
<animate id="animation1"
attributeName="stroke-opacity"
from="1" to="0.5" dur="0.5s"
begin="mouseover" fill="freeze" />
<animate id="animation2"
attributeName="stroke-opacity"
from="0.5" to="1" dur="0.5s"
begin="mouseout" fill="freeze" />
</g>
</g>
</defs>
<line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
<g transform="translate(-200,-200)" >
<title>dscn.n</title>
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#dscn.n" />
</g>
</g>
</svg>
</body>
这篇关于SVG使用animateTransform小心缩放悬停类效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
