Hi,
Firstly why are you using polygons instead of paths? Why not just put a / at
the end of an empty element instead of </polygon> or something?
1 - How to triger the animation when the entire SVG is moused over? Never done
that so I'm not sure which, if any of these, would work. If your SVG is in a
webpage you might be able to put a onmouseover element in the object or iframe
that contains it. You could change the begin attribute of the animateTransform
to "control_panel.mouseover". You could have a large rect with it's opacity set
to 0 as the last element and give it an onmouseover element. You have your
large rect as the background (in which case it will need to be visible) and
enclose everything in a g element which has the onmouseover.
2. I think you have to use javaScript if you want your animation to only start
at the first mouseover. Something like:
var Started=0
function getDoc(evt) {
return evt.currentTarget.ownerDocument
}
function begin(evt,Target) {
Doc=getDoc(evt)
try {
Doc.getElementById(Target).beginElement()
} catch (e) {
alert ("Something went wrong")
}
function startrotate(evt) {
if (Started==0) {
begin(evt, rotateElement)
}else{
Started=1
}
}
You have to put onmouseover="startrotate(evt)" somewhere apropriate and add
id="rotateElement" to your animateTransform.
----- Original Message -----
From: yjaguar0009
To: [email protected]
Sent: Thursday, April 25, 2013 1:19 AM
Subject: [svg-developers] mouseover management
Hello,
I built my first animated SVG:
<svg version="1.1" id="control_panel" class="icon_big"
xmlns="http://www.w3.org/2000/svg"; xlink="http://www.w3.org/1999/xlink"; x="0px"
y="0px" width="192px" height="192px" viewBox="0 0 48 48" enable-background="new
0 0 48 48" space="preserve">
<circle fill="#39383a" stroke="#96979a" stroke-width="1.5"
stroke-miterlimit="10" cx="24.0068" cy="24" r="21"></circle>
<rect x="23.3408" y="8.6748" fill="#96979a" width="1.332"
height="3.1201"></rect>
<polygon fill="#96979a" points="27.9248,12.3096 29.2422,9.3779 29.8174,9.5479
28.5,12.4795"></polygon>
<polygon fill="#96979a" points="31.6748,13.9648 34.1523,11.5752
34.6191,11.8926 32.1445,14.2822"></polygon>
<polygon fill="#96979a" points="34.5029,16.5586 37.8379,14.998
38.1436,15.4268 34.8086,16.9873"></polygon>
<polygon fill="#96979a" points="18.1973,9.5479 18.7715,9.3789 20.0889,12.3105
19.5137,12.4795"></polygon>
<polygon fill="#96979a" points="13.3936,11.8926 13.8623,11.5752
16.3379,13.9648 15.8701,14.2822"></polygon>
<polygon fill="#96979a" points="9.8701,15.4268 10.1768,14.998 13.5117,16.5586
13.2061,16.9873"></polygon>
<circle fill="#ff0000" cx="24.0068" cy="33.2998" r="2.457"></circle>
<rect x="23.3408" y="15.9941" fill="#ff0000" width="1.332"
height="23.7412"><animateTransform begin="mouseover" attributeName="transform"
attributeType="XML" type="rotate" values="0 24.0068 33.2998; 10 24.0068
33.2998; 20 24.0068 33.2998; 30 24.0068 33.2998; 50 24.0068 33.2998; 25 24.0068
33.2998; -15 24.0068 33.2998; 0 24.0068 33.2998" dur="0.4s" /></rect>
</svg>
I have two questions:
1 - The animation is triggered with the mouse over of the rect. How to make
the animation triggers with the mouse over of the whole SVG (all the objects of
the SVG)?
2 - How to make, once triggered, the animation always runs until the end
without being restarted by a new event mouseover?
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
