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

Re: problems with mouse events

Expand Messages
  • 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 1 of 5 , Mar 1, 2002
    • 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 2 of 5 , Mar 1, 2002
      • 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.