Consider the following html,
<!doctype html>
<html>
<head>
<script type="text/javascript">
function onSVGLoad () {
var elements = document.getElementsByTagName('path');
for (var index = 0; index < elements.length; index = index + 1) {
elements[index].addEventListener('click', function () {
alert('clicked');
});
}
};
</script>
</head>
<body onload="onSVGLoad();">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" height="768" viewBox="0,0 1024,768" width="1024">
<path stroke="blue" stroke-width="5" fill="white" d="M500,400L500,700L800,700L800,400L500,400" />
<path stroke="red" stroke-width="5" fill="white" d="M600,200v200" />
<path stroke="red" stroke-width="5" fill="white" d="M700,200v200" />
</svg>
</body>
</html>
On any modern browser, you can click any of the visible elements and you would get an alert. If you load the same file in a WebView, you get an alert only on the box-like path. It looks like the click event is raised only on the fill region.
Shouldn't the behaviour be consistent?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function onSVGLoad () {
var elements = document.getElementsByTagName('path');
for (var index = 0; index < elements.length; index = index + 1) {
elements[index].addEventListener('click', function () {
alert('clicked');
});
}
};
</script>
</head>
<body onload="onSVGLoad();">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" height="768" viewBox="0,0 1024,768" width="1024">
<path stroke="blue" stroke-width="5" fill="white" d="M500,400L500,700L800,700L800,400L500,400" />
<path stroke="red" stroke-width="5" fill="white" d="M600,200v200" />
<path stroke="red" stroke-width="5" fill="white" d="M700,200v200" />
</svg>
</body>
</html>
On any modern browser, you can click any of the visible elements and you would get an alert. If you load the same file in a WebView, you get an alert only on the box-like path. It looks like the click event is raised only on the fill region.
Shouldn't the behaviour be consistent?
- duplicates
-
JDK-8161284 JavaScript onclick, onmouseover and onmouseout don't work with SVG Line Elements
-
- Open
-