Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] mouseover management

Expand Messages
  • Richard Pearman
    Hi, Firstly why are you using polygons instead of paths? Why not just put a / at the end of an empty element instead of or something? 1 - How to
    Message 1 of 4 , May 3, 2013
    • 0 Attachment
      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: svg-developers@yahoogroups.com
      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]
    • brianskold
      ... If you want it to never restart use restart= never on the animateTransform element. If you simply want it to stop being interrupted while it is running
      Message 2 of 4 , May 6, 2013
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, "Richard Pearman" <rpearman@...> wrote:
        > 2. I think you have to use javaScript if you want your animation to only start at the first mouseover.

        If you want it to never restart use restart="never" on the animateTransform element. If you simply want it to stop being interrupted while it is running using restart="whenNotActive". There is no need for javascript.

        (Regarding the first point, note that you can use pointer-events to control the dispatch of events for invisible elements.)
      Your message has been successfully submitted and would be delivered to recipients shortly.