Hi all,
I've got some SVG files that contain mousemove event listeners to invoke a
script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc,
only the last page shows the tooltips when I run in most browsers. In IE9, I
get the tooltips across all the SVG's. This is my sample HTML file containing
the script and 2 child SVG elements. Any idea what I need to do to get each
SVG to display their unique tooltips?
Thanks!
<!DOCTYPE html >
<html>
<head>
<meta charset="windows-1252"/>
<meta name="generator" content="SAS 9.4"/>
<title>SVG Inlined in HTML5</title>
<script type="text/ecmascript">
var SVGRoot = null;
var viewBox = null;
var TrueCoords = null;
var singleTip = null;
var singleBox = null;
var singleText = null;
var tiptspan = null;
function Init(anchor) {
SVGRoot = document.getElementById(anchor);
TrueCoords = SVGRoot.createSVGPoint();
singleTip = document.getElementById(anchor + '_singleTip');
singleBox = document.getElementById(anchor + '_singlebox');
singleText = document.getElementById(anchor + '_singleText');
tiptspan = document.getElementById(anchor + '_tiptspan');
SVGRoot.addEventListener('mousemove', ShowTooltip, false);
SVGRoot.addEventListener('mouseout', HideTooltip, false);
if (navigator.appName == 'Microsoft Internet Explorer') {
if (singleText != null)
singleText.setAttributeNS(null, 'class', 'ietiptext' );
}
}
function GetTrueCoords(evt)
{
var p1 = SVGRoot.createSVGPoint();
var p2;
var m = SVGRoot.getScreenCTM();
p1.x = evt.clientX;
p1.y = evt.clientY;
p2 = p1.matrixTransform(m.inverse());
TrueCoords.x = Math.round(p2.x*100) / 100;
TrueCoords.y = Math.round(p2.y*100) / 100;
}
function HideTooltip( evt )
{
tiptspan.firstChild.nodeValue = null;
singleTip.setAttributeNS(null, 'visibility', 'hidden');
}
function ShowTooltip( evt )
{
GetTrueCoords( evt );
var targetElement = evt.target;
var targetTspan = targetElement.getElementsByTagName('desc').item(0);
if ( targetTspan) {
if (targetTspan.firstChild != null)
tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; }
if ( '' != tiptspan.firstChild.nodeValue )
{
var outline = singleText.getBBox();
singleTip.setAttributeNS(null, 'visibility', 'visible');
xPos = TrueCoords.x;
yPos = TrueCoords.y-20;
singleBox.setAttributeNS(null, 'height', outline.height + 10);
singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' +
yPos + ')');
}
}
</script>
<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
width="801" height="601"
xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1"
onload='Init("SVGMain1")' >
<desc></desc>
<defs>
<clipPath id="SVGMain_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain1_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG1</text>
<rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 1</desc>
</rect>
</g>
<g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none">
<rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2"
ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
<text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial',
sans-serif" font-size="8" class="tiptext">
<tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan>
</text>
</g>
<defs>
<style type="text/css"><![CDATA[
text { white-space: pre }
text.ietiptext { white-space: normal }
text.tiptext { white-space: pre }
]]></style>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
width="801" height="601" xml:space="preserve" baseProfile="full" version="1.1"
id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 601">
<desc></desc>
<defs>
<clipPath id="SVGMain2_clipPage1">
<rect x="-1" y="-1" width="801" height="601"/>
</clipPath>
</defs>
<g id="SVGMain2_Page1">
<rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; fill-opacity:
0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0;
stroke-linejoin: round; "/>
<rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke:
#FFFFFF; stroke-width: 1; stroke-linejoin: round; "/>
<path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; stroke-width:
1; fill: none; stroke-linejoin: round; "/>
<text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif;
font-size: 19px; font-weight: bold; ">SVG2</text>
<rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF"
fill-opacity="0">
<desc>Graphics text slide 2</desc>
</rect>
</g>
<g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none">
<rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2"
ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/>
<text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial',
sans-serif" font-size="8" class="tiptext">
<tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan>
</text>
</g>
</svg>
</body>
</html>
------------------------------------
-----
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/
