I was nervous about two things in your example, and unfortunately only had a
chance to change both, but in ways that seemed to make things work in Opera,
FF, Safari and IE/ASV:
1. I got rid of the HTML altogether -- so that the appendChild statements were
going directly into the root of the SVG -- that's certainly not going to render
at all in IE (though many SVG developers have given up on that anyhow).
2. I didn't like using
path1.onclick = function() { alert("hello"); };
in what is ultimately an SVG namespace
so instead I replace that with
path1.setAttribute("onclick","alert('hello')")
so in the following example (as adapted from your code) all seems to be working
everywhere.
I'm not sure if your example really covers the cases that you're interested in,
though I have never had the trouble you've described (that of having clicks on
things obscured by other objects in the SVG DOM) by doing it in ways I'm
accustomed to.
hope this helps
David
---------------
<svg xmlns="http://www.w3.org/2000/svg"; width="100%"
xmlns:xlink="http://www.w3.org/1999/xlink"; >
<script><![CDATA[
var svgns = 'http://www.w3.org/2000/svg';
xlink="http://www.w3.org/1999/xlink";
Root=document.documentElement
function createPath(color, points) {
var path = document.createElementNS(svgns, 'path');
path.setAttributeNS(null, 'stroke-opacity', '1');
path.setAttributeNS(null, 'stroke-width', '5');
path.setAttributeNS(null, 'fill', 'none');
path.setAttributeNS(null, 'stroke', color);
path.setAttributeNS(null, 'd', points);
return path;
}
function createSvg(width, height, top, left) {
var svg = document.createElementNS(svgns, 'svg');
svg.style.position = 'absolute';
svg.style.width = width + 'px';
svg.style.height = height + 'px';
svg.style.top = top + 'px';
svg.style.left = left + 'px';
svg.setAttributeNS(null, 'viewBox', left + ' ' + top + ' ' + width + ' ' +
height);
return svg;
}
//var svg1 = createSvg(100, 100, 100, 100);
var path1 = createPath('red', 'M 100 100 L 200 200');
//path1.onclick = function() { alert("hello"); };
path1.setAttribute("onclick","alert('hello')")
Root.appendChild(path1);
var svg2 = createSvg(100, 100, 150, 150);
var path2 = createPath('blue', 'M 150 250 L 250 150');
Root.appendChild(path2);
//Root.appendChild(svg1);
//Root.appendChild(svg2);
]]>
</script>
<defs>
</defs>
</svg>
----------------------------------
----- Original Message -----
From: Vladimir Agafonkin
To: [email protected]
Sent: Thursday, November 27, 2008 4:45 AM
Subject: [svg-developers] Click through the transparent part of an SVG element
Hi guys!
I'm implementing a mapping library (somehow similar to Google Maps)
and have a very frustrating problem with SVG - if I have several
independent SVG elements on an HTML page and one covers a part of the
other, shapes in that part don't receive click events. It behaves like
this in FF3 and Opera9 but surprisingly works fine in Safari 3.
Here's a simple test case to demostrate what I mean:
http://agafonkin.com/files/etc/svgbug.html (try clicking the red path)
Because of this problem I was forced to reimplement vector
functionality in my library so that all paths have one root SVG
element, but calculating shared viewBox is very inconvenient, besides
on high zoom levels this viewBox can become too big and it stops
rendering completely after some point.
I would appreciate any help on the matter. Thanks a lot in advance!
[Non-text portions of this message have been removed]
------------------------------------
-----
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:
mailto:[EMAIL PROTECTED]
mailto:[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/
