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

Re: Highlight/Lowlight via xlink/use

Expand Messages
  • domenico_strazzullo <nst@dotuscomus.com>
    Hi Remo, You need to invoke the functions from within the use element. This is the correct code with two changes:
    Message 1 of 3 , Feb 2, 2003
    • 0 Attachment
      Hi Remo,

      You need to invoke the functions from within the 'use' element.
      This is the correct code with two changes:

      <svg width="400" height="400" viewBox="0 0 400 400"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <script type="text/ecmascript"> <![CDATA[
      function highlight(evt) {
      SVGDocument = evt.getTarget().getOwnerDocument();
      obj=SVGDocument.getElementById("printer");
      obj.setAttribute("fill", "#cccccc");
      }
      function lowlight(evt) {
      obj.setAttribute("fill", "#dddddd");
      }
      ]]>
      </script>
      <defs>
      <rect id="printer" width="30" height="30" />
      </defs>
      <use id="printer1" x="250" y="0" xlink:href="#printer"
      onmouseover="highlight(evt)" onmouseout="lowlight(evt)"
      fill="#dddddd" />
      </svg>

      You might want to use the 'set' element instead of the script:

      <use id="printer1" x="250" y="0" xlink:href="#printer"
      onmouseover="highlight(evt)" onmouseout="lowlight(evt)"
      fill="#dddddd" >
      <set attributeName="fill" to="#cccccc" begin="mouseover"
      fill="freeze"/>
      <set attributeName="fill" to="#dddddd" begin="mouseout"
      fill="freeze"/>
      </use>

      Nico



      --- In svg-developers@yahoogroups.com, "rferrari75
      <rferrari75@y...>" <rferrari75@y...> wrote:
      > hi
      >
      > i'm trying to implement a simple highlighting-on-mouseover
      > functionality.
      > the ecmasrcipt functions work fine, as long as i just add the
      > onmouseover/onmouseout eventhandlers directly into the graphical
      > objects, but as soon as i link the graphical objects via xlink
      into
      > a <use> tag, it stops working. what's wrong with this code?
      >
      > <svg width="400" height="400" viewBox="0 0 400 400"
      > xmlns="http://www.w3.org/2000/svg"
      > xmlns:xlink="http://www.w3.org/1999/xlink">
      >
      > <script type="text/ecmascript"> <![CDATA[
      >
      > function highlight(evt) {
      > var obj = evt.target;
      > obj.setAttribute("fill", "#cccccc");
      > }
      > function lowlight(evt) {
      > var obj = evt.target;
      > obj.setAttribute("fill", "#dddddd");
      > }
      > ]]>
      > </script>
      >
      > <defs>
      > <rect id="printer" onmouseover="highlight(evt)"
      > onmouseout="lowlight(evt)" width="30" height="30"
      > fill="#dddddd" />
      > </defs>
      >
      > <use id="printer1" x="250" y="0" xlink:href="#printer" />
      >
      > </svg>
      >
      >
      > thx
      > remo 8-)
    Your message has been successfully submitted and would be delivered to recipients shortly.