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

problems with mouse events

Expand Messages
  • jpeyrott
    Hi, i have a svg which contains tspan elements. whrn on mouseover on a button, my svg becomes visible with my tspan. but i want to hide my svg and my tspan if
    Message 1 of 5 , Mar 1 6:28 AM
    • 0 Attachment
      Hi, i have a svg which contains tspan elements. whrn on mouseover on
      a button, my svg becomes visible with my tspan. but i want to hide my
      svg and my tspan if on mouseout from my svg. The problem is when
      pointer is on tspan, it considers that it leaves svg but i do not
      understand because tspan is inside svg.

      i copied my code.

      Thanks.

      <svg id="svg5" x="13" y="123.1132075471698" width="450" height="150"
      visibility="hidden">
      <animate begin="News5.mouseover" dur="0.1s"
      attributeName="visibility" from="hidden" to="visible" fill="freeze"/>
      <g id="newsgroup5" onmouseout="deleteContour
      (evt,'5')">
      <rect id="logorect5"
      onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
      height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
      <image id="logoimage5"
      onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
      height="15" xlink:href="c:/SVG/reuters.gif"/>
      <rect id="contour5" x="0" y="20" width="450"
      height="80" style="fill:white; stroke:darkblue; stroke-width:2"/>
      <text id="message5">
      <tspan x="10" y="20"
      style="fill:darkblue; font-size:16; font-family: Arial, sans-serif"/>
      <tspan
      id="headline1013b563481nL12159899" onclick="deleteContour(evt,'5') "
      x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
      Arial, sans-serif">
      <animate attributeName="font-
      weight" begin="mouseover" dur="0.1s" from="none" to="bold"
      fill="freeze"/>
      <animate attributeName="font-
      weight" begin="mouseout" dur="0.1s" from="bold" to="none"
      fill="freeze"/>
      <a
      xlink:href="http://otf1:otf1@132.82.25.210/CTIB/JGNEWS2?
      FORMAT=HTML&TEXT=1013b563481nL12159899" target="_blank">08:11
      DANONE se désengage des activités de Galbani </a>
      </tspan>
      <tspan
      id="headline101250w3481nL12159299" onclick="deleteContour(evt,'5') "
      x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
      Arial, sans-serif">
      <animate attributeName="font-
      weight" begin="mouseover" dur="0.1s" from="none" to="bold"
      fill="freeze"/>
      <animate attributeName="font-
      weight" begin="mouseout" dur="0.1s" from="bold" to="none"
      fill="freeze"/>
      <a
      xlink:href="http://otf1:otf1@132.82.25.210/CTIB/JGNEWS2?
      FORMAT=HTML&TEXT=101250w3481nL12159299" target="_blank">08:08
      Fondiaria-La proposition de fusion de SAI ne convient pas </a>
      </tspan>
      </text>
      </g>
      </svg>
    • fruc13
      Try to post a link to a working (without script errors) online example (it is hard to read code rewraped from yahoo) There are some javascript cals in this
      Message 2 of 5 , Mar 1 7:19 AM
      • 0 Attachment
        Try to post a link to a working (without script errors) online
        example (it is hard to read code rewraped from yahoo)
        There are some javascript cals in this example but not the functions
        and a linked animation to the news5 element that does not exist.

        iztok jeras
        www.rattus.info

        --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
        >
        > Hi, i have a svg which contains tspan elements. whrn on mouseover
        on
        > a button, my svg becomes visible with my tspan. but i want to hide
        my
        > svg and my tspan if on mouseout from my svg. The problem is when
        > pointer is on tspan, it considers that it leaves svg but i do not
        > understand because tspan is inside svg.
        >
        > i copied my code.
        >
        > Thanks.
        >
        > <svg id="svg5" x="13" y="123.1132075471698" width="450"
        height="150"
        > visibility="hidden">
        > <animate begin="News5.mouseover" dur="0.1s"
        > attributeName="visibility" from="hidden" to="visible"
        fill="freeze"/>
        > <g id="newsgroup5" onmouseout="deleteContour
        > (evt,'5')">
        > <rect id="logorect5"
        > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
        > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
        > <image id="logoimage5"
        > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
        > height="15" xlink:href="c:/SVG/reuters.gif"/>
        > <rect id="contour5" x="0" y="20" width="450"
        > height="80" style="fill:white; stroke:darkblue; stroke-width:2"/>
        > <text id="message5">
        > <tspan x="10" y="20"
        > style="fill:darkblue; font-size:16; font-family: Arial, sans-
        serif"/>
        > <tspan
        > id="headline1013b563481nL12159899" onclick="deleteContour
        (evt,'5') "
        > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
        > Arial, sans-serif">
        > <animate attributeName="font-
        > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
        > fill="freeze"/>
        > <animate attributeName="font-
        > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
        > fill="freeze"/>
        > <a
        > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
        > FORMAT=HTML&TEXT=1013b563481nL12159899" target="_blank">08:11
        > DANONE se désengage des activités de Galbani </a>
        > </tspan>
        > <tspan
        > id="headline101250w3481nL12159299" onclick="deleteContour
        (evt,'5') "
        > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
        > Arial, sans-serif">
        > <animate attributeName="font-
        > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
        > fill="freeze"/>
        > <animate attributeName="font-
        > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
        > fill="freeze"/>
        > <a
        > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
        > FORMAT=HTML&TEXT=101250w3481nL12159299" target="_blank">08:08
        > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
        > </tspan>
        > </text>
        > </g>
        > </svg>
      • jpeyrott
        my code runs. But its seems in svg, if i have a rectangle with tspan elements inside. tspan elements are on mouseout from rectangle . I want to hide my block
        Message 3 of 5 , Mar 1 7:54 AM
        • 0 Attachment
          my code runs. But its seems in svg, if i have a rectangle with tspan
          elements inside. tspan elements are "on mouseout from rectangle ". I
          want to hide my block (rectangle+tspan) if my pointer is outside of
          block .
          the problem is that if my pointer is on tspan inside rectangle, it
          thinks that pointer is outside of block...



          --- In svg-developers@y..., "fruc13" <izi@d...> wrote:
          > Try to post a link to a working (without script errors) online
          > example (it is hard to read code rewraped from yahoo)
          > There are some javascript cals in this example but not the
          functions
          > and a linked animation to the news5 element that does not exist.
          >
          > iztok jeras
          > www.rattus.info
          >
          > --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
          > >
          > > Hi, i have a svg which contains tspan elements. whrn on mouseover
          > on
          > > a button, my svg becomes visible with my tspan. but i want to
          hide
          > my
          > > svg and my tspan if on mouseout from my svg. The problem is when
          > > pointer is on tspan, it considers that it leaves svg but i do not
          > > understand because tspan is inside svg.
          > >
          > > i copied my code.
          > >
          > > Thanks.
          > >
          > > <svg id="svg5" x="13" y="123.1132075471698" width="450"
          > height="150"
          > > visibility="hidden">
          > > <animate begin="News5.mouseover" dur="0.1s"
          > > attributeName="visibility" from="hidden" to="visible"
          > fill="freeze"/>
          > > <g id="newsgroup5" onmouseout="deleteContour
          > > (evt,'5')">
          > > <rect id="logorect5"
          > > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
          > > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
          > > <image id="logoimage5"
          > > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
          > > height="15" xlink:href="c:/SVG/reuters.gif"/>
          > > <rect id="contour5" x="0" y="20" width="450"
          > > height="80" style="fill:white; stroke:darkblue; stroke-width:2"/>
          > > <text id="message5">
          > > <tspan x="10" y="20"
          > > style="fill:darkblue; font-size:16; font-family: Arial, sans-
          > serif"/>
          > > <tspan
          > > id="headline1013b563481nL12159899" onclick="deleteContour
          > (evt,'5') "
          > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
          > > Arial, sans-serif">
          > > <animate attributeName="font-
          > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
          > > fill="freeze"/>
          > > <animate attributeName="font-
          > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
          > > fill="freeze"/>
          > > <a
          > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
          > > FORMAT=HTML&TEXT=1013b563481nL12159899" target="_blank">08:11
          > > DANONE se désengage des activités de Galbani </a>
          > > </tspan>
          > > <tspan
          > > id="headline101250w3481nL12159299" onclick="deleteContour
          > (evt,'5') "
          > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
          > > Arial, sans-serif">
          > > <animate attributeName="font-
          > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
          > > fill="freeze"/>
          > > <animate attributeName="font-
          > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
          > > fill="freeze"/>
          > > <a
          > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
          > > FORMAT=HTML&TEXT=101250w3481nL12159299" target="_blank">08:08
          > > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
          > > </tspan>
          > > </text>
          > > </g>
          > > </svg>
        • fruc13
          Ok now I understand, solutions: 1.) put rectangle and text inside an roup and use the group for the onmouseout event triggering 2.) I you don t want to trigger
          Message 4 of 5 , Mar 1 8:07 AM
          • 0 Attachment
            Ok now I understand, solutions:
            1.) put rectangle and text inside an roup and use the group for the
            onmouseout event triggering
            2.) I you don't want to trigger any events on the text you can put an
            attribute pointer-events="none" to the text elements

            Report you sucess on other.

            IzI

            --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
            > my code runs. But its seems in svg, if i have a rectangle with
            tspan
            > elements inside. tspan elements are "on mouseout from rectangle ".
            I
            > want to hide my block (rectangle+tspan) if my pointer is outside of
            > block .
            > the problem is that if my pointer is on tspan inside rectangle, it
            > thinks that pointer is outside of block...
            >
            >
            >
            > --- In svg-developers@y..., "fruc13" <izi@d...> wrote:
            > > Try to post a link to a working (without script errors) online
            > > example (it is hard to read code rewraped from yahoo)
            > > There are some javascript cals in this example but not the
            > functions
            > > and a linked animation to the news5 element that does not exist.
            > >
            > > iztok jeras
            > > www.rattus.info
            > >
            > > --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
            > > >
            > > > Hi, i have a svg which contains tspan elements. whrn on
            mouseover
            > > on
            > > > a button, my svg becomes visible with my tspan. but i want to
            > hide
            > > my
            > > > svg and my tspan if on mouseout from my svg. The problem is
            when
            > > > pointer is on tspan, it considers that it leaves svg but i do
            not
            > > > understand because tspan is inside svg.
            > > >
            > > > i copied my code.
            > > >
            > > > Thanks.
            > > >
            > > > <svg id="svg5" x="13" y="123.1132075471698" width="450"
            > > height="150"
            > > > visibility="hidden">
            > > > <animate begin="News5.mouseover" dur="0.1s"
            > > > attributeName="visibility" from="hidden" to="visible"
            > > fill="freeze"/>
            > > > <g id="newsgroup5" onmouseout="deleteContour
            > > > (evt,'5')">
            > > > <rect id="logorect5"
            > > > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
            > > > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
            > > > <image id="logoimage5"
            > > > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
            > > > height="15" xlink:href="c:/SVG/reuters.gif"/>
            > > > <rect id="contour5" x="0" y="20" width="450"
            > > > height="80" style="fill:white; stroke:darkblue; stroke-
            width:2"/>
            > > > <text id="message5">
            > > > <tspan x="10" y="20"
            > > > style="fill:darkblue; font-size:16; font-family: Arial, sans-
            > > serif"/>
            > > > <tspan
            > > > id="headline1013b563481nL12159899" onclick="deleteContour
            > > (evt,'5') "
            > > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-
            family:
            > > > Arial, sans-serif">
            > > > <animate attributeName="font-
            > > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
            > > > fill="freeze"/>
            > > > <animate attributeName="font-
            > > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
            > > > fill="freeze"/>
            > > > <a
            > > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
            > > > FORMAT=HTML&TEXT=1013b563481nL12159899"
            target="_blank">08:11
            > > > DANONE se désengage des activités de Galbani </a>
            > > > </tspan>
            > > > <tspan
            > > > id="headline101250w3481nL12159299" onclick="deleteContour
            > > (evt,'5') "
            > > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-
            family:
            > > > Arial, sans-serif">
            > > > <animate attributeName="font-
            > > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
            > > > fill="freeze"/>
            > > > <animate attributeName="font-
            > > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
            > > > fill="freeze"/>
            > > > <a
            > > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
            > > > FORMAT=HTML&TEXT=101250w3481nL12159299"
            target="_blank">08:08
            > > > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
            > > > </tspan>
            > > > </text>
            > > > </g>
            > > > </svg>
          • honnen_martin
            The SVG spec for rect reads: so you are not
            Message 5 of 5 , Mar 1 9:21 AM
            • 0 Attachment
              The SVG spec for rect reads:

              <!ELEMENT rect (%descTitleMetadata;,
              (animate|set|animateMotion|animateColor|animateTransform
              %geExt;%rectExt;)*) >

              so you are not allowed to put a text element inside a rect element.
              Instead, use a g element to group the rect and the text element.
              As for the scripting, you need to check evt.relatedTarget. Here is
              an example

              <svg viewBox="0 0 100 100">
              <script type="text/ecmascript"><![CDATA[
              function nodeContains (container, containee) {
              while (containee) {
              if (container == containee)
              return true;
              containee = containee.parentNode;
              }
              return false;
              }
              function mouseLeaves (node, evt) {
              return !nodeContains(node, evt.relatedTarget);
              }

              ]]></script>
              <g transform="translate(10, 10)"
              onmouseout="if (mouseLeaves(evt.currentTarget, evt))
              evt.currentTarget.style.setProperty
              ('visibility', 'hidden');">
              <rect width="40" height="40"
              style="fill: green; stroke: yellow;"
              />
              <text x="20" y="26"
              style="fill: yellow; font-size: 18; text-anchor: middle;"
              >Kibo</text>
              </g>
              <g transform="translate(60, 60)"
              onmouseout="if (mouseLeaves(evt.currentTarget, evt))
              evt.currentTarget.style.setProperty
              ('visibility', 'hidden');">
              <rect width="40" height="40"
              style="fill: lightblue; stroke: darkblue;"
              />
              <text x="20" y="10"
              style="fill: white; font-size: 8; text-anchor: middle;"
              >
              <tspan x="20" dy="1em">Kibology</tspan>
              <tspan x="20" dy="1em">for</tspan>
              <tspan x="20" dy="1em">all</tspan>
              </text>
              </g>
              </svg>


              Martin
            Your message has been successfully submitted and would be delivered to recipients shortly.