I have a little svg imagemap that has four quadrants. When each quadrant is clicked on, it is supposed to change the opacity of a rectangle overlaying the grayscale base image. When clicked again, the opacity goes back to 0. It works great but it takes two clicks on each quadrant to get the thing going.
I have seen a lot of suggestions about using JQuery, but my understanding is that JQuery does not register onclicks in svg which is xml.
Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
<image width="290" height="290" xlink:href="../includes-jar-code/_images/SquareTestGray.png">
</image>
<!--<a xlink:href="//jarea.com/yellow">-->
<rect onclick="top.notify(evt)" id="svgYellow" x="0" y="0" fill="#FFFF00" opacity="0" width="145" height="145" />
<text x="72" y="72" fill="red">Y</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/pink">-->
<rect onclick="top.notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" opacity="0" width="145" height="145" />
<text x="72" y="218" fill="red">P</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/blue">-->
<rect onclick="top.notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" opacity="0" width="145" height="145" />
<text x="218" y="72" fill="red">B</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/green">-->
<rect onclick="top.notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" opacity="0" width="145" height="145" />
<text x="218" y="218" fill="red">G</text>
<!--</a>-->
</svg>
<script>
function notify(evt){
if( document.getElementById(evt.target.id).style.opacity == "0" ) {
document.getElementById(evt.target.id).style.opacity = ".25";
} else {
document.getElementById(evt.target.id).style.opacity = "0";
}
}
</script>
</body>
</html>
Don't have a high enough reputation to post the background image. It is a 290 x 290 px grayscale square divided evenly into 4 quadrants.
Your insights and suggestions are greatly appreciated.
thats because you set the opacity attribute on the element, but you read the opacity style property which initialy is empty. you can either set the style on your elements instead of the attribute:
function notify(evt){
if( document.getElementById(evt.target.id).style.opacity == "0" ) {
document.getElementById(evt.target.id).style.opacity = ".25";
} else {
document.getElementById(evt.target.id).style.opacity = "0";
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
<rect x="0" y="0" width="290" height="290" fill="royalblue" stroke="#53c"></rect>
<!--<a xlink:href="//jarea.com/yellow">-->
<rect onclick="notify(evt)" id="svgYellow" x="0" y="0" fill="#FFFF00" style="opacity:0" width="145" height="145" />
<text x="72" y="72" fill="red">Y</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/pink">-->
<rect onclick="notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" style="opacity:0" width="145" height="145" />
<text x="72" y="218" fill="red">P</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/blue">-->
<rect onclick="notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" style="opacity:0" width="145" height="145" />
<text x="218" y="72" fill="red">B</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/green">-->
<rect onclick="notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" style="opacity:0" width="145" height="145" />
<text x="218" y="218" fill="red">G</text>
<!--</a>-->
</svg>
</body>
</html>
or you can set and read the attribute value from your script:
function notify(evt){
if(evt.target.getAttribute("opacity") == "0" ) {
evt.target.setAttribute("opacity","0.25");
} else {
evt.target.setAttribute("opacity","0");
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin<image width="290" height="290" xlink:href="../includes-jar-code/_images/SquareTestGray.png">
<rect x="0" y="0" width="290" height="290" fill="royalblue" stroke="#53c"></rect>
<!--<a xlink:href="//jarea.com/yellow">-->
<rect onclick="notify(evt)" id="svgYellow" opacity="0" x="0" y="0" fill="#FFFF00" width="145" height="145" />
<text x="72" y="72" fill="red">Y</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/pink">-->
<rect onclick="notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" opacity="0" width="145" height="145" />
<text x="72" y="218" fill="red">P</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/blue">-->
<rect onclick="notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" opacity="0" width="145" height="145" />
<text x="218" y="72" fill="red">B</text>
<!--</a>-->
<!--<a xlink:href="//jarea.com/green">-->
<rect onclick="notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" opacity="0" width="145" height="145" />
<text x="218" y="218" fill="red">G</text>
<!--</a>-->
</svg>
Related
I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.
How to use the pattern element in svg to achieve this?
Here is the diagram of the result I want
I tried to achieve this shift but it did not work.
<svg width=1000 height=1000>
<pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect class="checker" x="0" width="100" height="100" y="0" fill="blue" />
<rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" />
<rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
<rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" />
</pattern>
<rect width="100%" height="100%" fill=url(#bar)>
</svg>
The difficulty is that each of my squares is an image and it cannot be split in half. So I can't find the smallest element of this pattern.
Thank you in advance.
Something like this... You can replace the paths with images.
The trick is to draw one of the pieces in two separate halves allowing the pattern rect to clip each half.
<svg>
<pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80">
<path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
</pattern>
<rect width="200" height="200" fill="url(#p)"/>
</svg>
Im trying to fix this bug, and I have tried alot things but nothing help, if I give value of x='23%' like <text id="badgeText" x = "23% ... I can fix bug on safari but than bug start repodruce everytime on other browsers(mozila,chrome etc...), anyhow the bug is reproducing once in many times on other browsers ...
bug image
<div class="CoveoShowIfFieldValue" data-field="#isRecommended" data-field-value="True">
<svg height="25px" style="overflow:visible!important;">
<g id="recommendedBadge" style="object-fit:contain!important;">
<rect x="0" y="0" rx="15px" ry="15px"/>
<text id="badgeText" y="66%" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;"></text>
<g class="tooltip" transform="translate(21,62)">
<rect x="-6%" width="450" y="-35" height="25" rx="5px" ry="5px"/>
<text y="-31" dy="1em" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip"></text>
</g>
</g>
</svg> </div>
It’s not a bug:
You need to add some width related properties like width or a viewBox.
Otherwise a browser can’t tell how to render a relative unit within a svg element.
Some browsers might be more forgiving by guessing or setting default width values as fallbacks. (Currently most firefox and chromium based browsers use 300px as a fallback).
<style>
svg {
border: 1px solid red;
height: 25px;
}
text {
fill: #fff;
}
</style>
<h2>Use viewBox</h2>
<svg viewBox="0 0 450 25" style="overflow:visible!important;">
<g id="recommendedBadge">
<rect x="0" y="0" rx="15" ry="15" width="100%" height="25" />
<text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;">
Badge Text
</text>
<g class="tooltip" transform="translate(0 25)">
<rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" />
<text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text>
</g>
</g>
</svg>
<br><br><br>
<h2>Use width</h2>
<svg height="25" width="100%" style="overflow:visible!important;">
<g id="recommendedBadge">
<rect x="0" y="0" rx="15" ry="15" width="100%" height="25" />
<text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;">
Badge Text
</text>
<g class="tooltip" transform="translate(0 25)">
<rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" />
<text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text>
</g>
</g>
</svg>
I'm working on a web project for displaying some alerts, and this code generates one such alerts, however the main body of the alert which is the foreign object in the div is not visible in firefox but it is in chrome.
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">
.....
<g id="cube2_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
#*<text text-anchor="start" x="445" y="40" class="txt_alarm_text" >TESTer TEXT super long bunch of info hello how are you this should not fit</text>*#
<foreignobject width="135" height="95" transform="translate(445,30)" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
.......
</svg>
The body of the alert is a foreign object because it contains text that would always get out of the bounds of the gray rectangle where it is supposed to be displayed. as such tspan is not an option, because it would require text to be calculated and split in various lines
I tried switching the code in the svg tag, the viewbox atribute, to width="100%" and height="100%" but that didn't work, even though it was what was causing it to not work in w3school's tryit editor, there I tested with the following code, and it does display in firefox correctly.
<!DOCTYPE html>
<html>
<body>
<svg height="100%" width="100%" version="1.1">
<text x="0" y="15" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
<foreignobject width="135" height="95" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
</svg>
</body>
</html>
the alert alternates between 2 similar objects using this javascript
setInterval(function () {
anim1();
setTimeout(function () { anim2(); }, 10000);
//setTimeout(anim3(), 20000);
}, 20000);
function calRotE1(rot) {
$("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "0", "visibility": "hidden" });
$("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(0deg)", "visibility": "visible" });
}
function anim1() {
calcRotation1(90);
calRotE1(180);
};
function anim2() {
calcRotation2(0);
calRotE2(0);
};
function calRotE2(rot) {
$("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "1", "visibility": "visible" });
$("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(180deg)", "visibility": "hidden" });
}
here is the side "A" of the alarm
<g id="cube1_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="imageA.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">Title A</text>
<foreignobject width="135" height="95" transform="translate(440,30)">
<div>
Body A
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
I even tested the whole chunk of code in the tryit editor and it did display correctly. I just can't explain why it all works fine in chrome but not firefox
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">
<g id="cube2_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
<foreignobject width="135" height="95" transform="translate(445,30)" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
</svg>
Like it is suggested in the comments the element is called <foreignObject> with capital "O" and you could use the proper namespace for the child element.
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg">
<g id="cube2_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
<foreignObject width="135" height="95" transform="translate(445,30)" >
<div xmlns="http://www.w3.org/1999/xhtml">
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignObject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
</svg>
first post here. I'm sure there's a simple solution to this but I'm really struggling on this one.
I'm trying to update the colour of specific rectangles within an svg when clicked, and I'm having issues changing the colour of the specified rectangle
e.g. I have an image of a map of rooms, clicking on an individual room will change the colour of the room.
I generated the svg image using illustrator.
HTML:
<xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="FloorPlan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve" onclick="javascript: changeColour();">
<style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st1 {
font-family: 'Myriad-Web';
}
.st2 {
font-size: 19.1885px;
}
</style>
<rect x="98.5" y="153" class="st0" width="1170.5" height="308.6" />
<rect id="Violet" x="99.2" y="182" class="st0" width="81.4" height="76.8"/>
<rect id="Cacoa" x="99.2" y="259.3" class="st0" width="81.4" height="76.8" />
<rect id="Vine" x="99.2" y="336.1" class="st0" width="81.4" height="126.3" />
<rect id="Olive" x="180.7" y="368.1" class="st0" width="81.4" height="94.3" />
<rect id="Cotton" x="262.1" y="368.1" class="st0" width="144.9" height="94.3" />
<rect id="RoseBay" x="407" y="368.1" class="st0" width="144.9" height="94.3" />
<rect id="Clove" x="552" y="368.1" class="st0" width="81.4" height="94.3" />
<rect id="Orchid" x="633.4" y="368.1" class="st0" width="81.4" height="94.3" />
<rect id="Lotus" x="848.7" y="368.1" class="st0" width="81.4" height="94.3" />
<rect id="Bamboo" x="848.7" y="273.7" class="st0" width="81.4" height="94.3" />
<rect id="Spruce" x="1091.6" y="368.1" class="st0" width="81.4" height="94.3" />
<rect id="Pecan" x="1091.6" y="273.7" class="st0" width="81.4" height="94.3" />
<text transform="matrix(0.8632 0 0 1 21.0381 220.3613)" class="st1 st2">Violet (4)</text>
<text transform="matrix(0.8632 0 0 1 20.3779 297.5322)" class="st1 st2">Cacoa (4)</text>
<text transform="matrix(0.8632 0 0 1 21.0967 392.4932)" class="st1 st2">Vine (6)</text>
<text transform="matrix(0.8632 0 0 1 191.2188 502.4238)" class="st1 st2">Olive (4)</text>
<text transform="matrix(0.8632 0 0 1 288.6143 502.3027)" class="st1 st2">Cotton (10)</text>
<text transform="matrix(0.8632 0 0 1 430.7705 501.9131)" class="st1 st2">RoseBay (10)</text>
<text transform="matrix(0.8632 0 0 1 557.7559 501.6709)" class="st1 st2">Clove (4)</text>
<text transform="matrix(0.8632 0 0 1 647.6934 503.2031)" class="st1 st2">Orchid (4)</text>
<text transform="matrix(0.8632 0 0 1 776.0117 424.3525)" class="st1 st2">Lotus (6)</text>
<text transform="matrix(0.8632 0 0 1 747.0732 320.376)" class="st1 st2">Bamboo (6)</text>
<text transform="matrix(0.8632 0 0 1 1006.8291 424.0977)" class="st1 st2">Spruce (4)</text>
<text transform="matrix(0.8632 0 0 1 1011.3525 320.8867)" class="st1 st2">Pecan (4)</text>
</svg>
JavaScript:
<script type="text/javascript">
function changeColour() {
var a = document.getElementById("FloorPlan");
var svgDoc = a.getElementsByTagName('rect');
var svgItem = //notsure how to get the clicked rectangle here
svgItem.setAttribute("fill", "lime");
}
</script>
You can do this with CSS by adding styles for the :active pseudo class:
#r1:active { fill:#f00; }
#r2:active { fill:#f80; }
#r3:active { fill:#ee0; }
#r4:active { fill:#3c0; }
#r5:active { fill:#0bb; }
#r6:active { fill:#07e; }
#r7:active { fill:#00d; }
#r8:active { fill:#60a; }
<svg width="400" height="200" viewBox="0 0 400 200">
<g stroke="#000" stroke-width="4" style="fill:#999">
<rect id="r1" x="10" y="10" width="80" height="80"/>
<rect id="r2" x="110" y="10" width="80" height="80"/>
<rect id="r3" x="210" y="10" width="80" height="80"/>
<rect id="r4" x="310" y="10" width="80" height="80"/>
<rect id="r5" x="10" y="110" width="80" height="80"/>
<rect id="r6" x="110" y="110" width="80" height="80"/>
<rect id="r7" x="210" y="110" width="80" height="80"/>
<rect id="r8" x="310" y="110" width="80" height="80"/>
</g>
</svg>
However, these styles are only applied while the mouse button is being held down. If you want the colours to stay behind after the mouse button has been released, you'll have to use some form of scripting instead. This is how you might do it using jQuery:
$(function(){
$('.map-item').click(function(){
$('.map-item').attr('class','map-item');
$(this).attr('class','chosen map-item');
});
});
#r1.chosen { fill:#f00; }
#r2.chosen { fill:#f80; }
#r3.chosen { fill:#ee0; }
#r4.chosen { fill:#3c0; }
#r5.chosen { fill:#0bb; }
#r6.chosen { fill:#07e; }
#r7.chosen { fill:#00d; }
#r8.chosen { fill:#60a; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="400" height="200" viewBox="0 0 400 200">
<g stroke="#000" stroke-width="4" style="fill:#999">
<rect class="map-item" id="r1" x="10" y="10" width="80" height="80"/>
<rect class="map-item" id="r2" x="110" y="10" width="80" height="80"/>
<rect class="map-item" id="r3" x="210" y="10" width="80" height="80"/>
<rect class="map-item" id="r4" x="310" y="10" width="80" height="80"/>
<rect class="map-item" id="r5" x="10" y="110" width="80" height="80"/>
<rect class="map-item" id="r6" x="110" y="110" width="80" height="80"/>
<rect class="map-item" id="r7" x="210" y="110" width="80" height="80"/>
<rect class="map-item" id="r8" x="310" y="110" width="80" height="80"/>
</g>
</svg>
Note: Ordinarily you would use jQuery's addClass() and removeClass() functions to change the class attributes. However, this doesn't work in the SVG namespace, so you have to set the class attributes directly with attr().
Well I have this svg file (click me). Now I want the tooltip script to show the tooltips not next to the mouse, but next to the element which it belongs to, when the mouse is above the element.
Now i know, that the position of the tooltip is given by evt.clientX / evt.clientY. But I couldn't find a function, solving my problem.
I hope somebody can help me...
Here goes my code:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
<style>
.tooltip{
font-family: Verdana;
fill:white;
}
.tooltip_bg{
fill: black;
opacity: 0.5;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext){
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.firstChild.data = mouseovertext;
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+11);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt){
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
</a>
<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>
You can use getBBox method of rect element, like this.
And you should set pointerEvents style value of caption text element to "none".
see http://jsfiddle.net/s0z9o00g/2/
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
<style>
.tooltip{
font-family: Verdana;
fill:white;
}
.tooltip_bg{
fill: black;
opacity: 0.5;
}
text{
pointer-events:none;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext){
var el = evt.target;
var bbox = el.getBBox();
//tooltip.setAttributeNS(null,"x",evt.clientX+11);
//tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.setAttributeNS(null,"x",bbox.x + bbox.width +11);
tooltip.setAttributeNS(null,"y",bbox.y + bbox.height+27);
tooltip.firstChild.data = mouseovertext;
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
//tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
//tooltip_bg.setAttributeNS(null,"y",evt.clientY+11);
tooltip_bg.setAttributeNS(null,"x",bbox.x + bbox.width +8);
tooltip_bg.setAttributeNS(null,"y",bbox.y + bbox.height+11);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt){
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
</a>
<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>