|
<?xml
version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="270" height="245" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Mouseover Event</title>
<defs>
<filter id="dreiD" filterUnits="userSpaceOnUse"
x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceAlpha"
stdDeviation="3" result="weicherSchatten"/>
<feSpecularLighting in="weicherSchatten"
surfaceScale="5" specularConstant=".75"
specularExponent="20"
lighting-color="#bbbbbb"
result="lichtEffekt">
<fePointLight x="-5000"
y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="lichtEffekt"
in2="SourceAlpha" operator="in" result="lichtEffektBegrenzt"/>
<feComposite in="SourceGraphic"
in2="lichtEffektBegrenzt" operator="arithmetic"
k1="0"
k2="1" k3="1" k4="0" result="virtuelleWoelbung"/>
<feMerge>
<feMergeNode in="weicherSchatten"/>
<feMergeNode in="virtuelleWoelbung"/>
</feMerge>
</filter>
</defs>
<desc>Der Button mit dem mouseover- und mouseout-event</desc>
<g
onmouseover="evt.target.ownerDocument.getElementById('warningAni').beginElement();evt.target.ownerDocument.getElementById('btnAni').beginElement();"
onmouseout="evt.target.ownerDocument.getElementById('warningAni').endElement();evt.target.ownerDocument.getElementById('btnAni').endElement();">
<circle cx="135" cy="100"
r="48" fill="#AAFF55"/>
<circle cx="135" cy="100"
r="48" stroke="black" stroke-width="8"
fill="none" filter="url(#dreiD)"/>
<circle cx="135" cy="100"
r="35" stroke="none" fill="green" filter="url(#dreiD)">
<animateColor attributeName="fill"
attributeType="XML" id="btnAni"
keyTimes="0;.5;1"
values="green;red;green"
dur="1s" repeatDur="2:00"
begin="indefinite"
end="indefinite"/>
</circle>
</g>
<text x="135" y="225" font-size="50"
fill="#FF0000" text-anchor="middle" style="visibility:hidden;">
warning!
<set attributeName="visibility"
attributeType="CSS" id="warningAni"
from="hidden" to="visible"
fill="remove"
dur="1s" repeatDur="2:00"
begin="indefinite"
end="indefinite"/>
</text>
</svg> |
|
