Develop Reference

text is going out of <svg><rect> box once in 1000x times but on safari browser always reproduce this bug

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>

why is this SVG foreign object not showing in firefox but it is in chrome?

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>

SVG text and image centered within a rectangle

I'm really not familiar with SVG's so I'm sorry if this is actually a fairly easy problem..
I'm creating an SVG:
<svg height="100%" width="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
<image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q" transform="translate(-35.5,-31)" x="50%" y="50%" height="50px" width="50px"/>
<text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Kitty Cat</text>
</svg>
And as you can see both the image of the cat and the text are centered in the rectangle, but this isn't the desired effect I want.
I'd like the image to be next to the text and both of them be centered in the rectangle.. example:
How is this doable using SVGs? Is javascript required? Any help would be great! Thanks

Unlike HTML, SVG has no automatic layout of groups of elements.
You have two choices:
Cheat and put your image and text in HTML and use a <foreignObject> element to embed the HTML in your SVG. Although it is barely an SVG any more. And that only works in browsers.
Use Javascript to measure the text and then re-position it in the centre.
function reCentre() {
var svg = document.getElementById("mysvg");
var group = document.getElementById("centreMe");
// Get the bounding box of the image+text group
var groupBounds = group.getBBox();
// Get the size of the SVG on the page
var svgBounds = svg.getBoundingClientRect();
// Calculate new position for the group
var groupPosX = (svgBounds.width - groupBounds.width) / 2;
var groupPosY = (svgBounds.height - groupBounds.height) / 2;
// Calculate the difference between the groups current position
// and where it needs to be in order to be centred.
var dx = groupPosX - groupBounds.x;
var dy = groupPosY - groupBounds.y;
// Give the group a translate transform to move it to this new position
group.setAttribute("transform", "translate("+dx+","+dy+")");
}
// Initial centering
reCentre();
// Also recentre when window resizes
window.addEventListener("resize", reCentre);
<svg id="mysvg" height="100%" width="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
<g id="centreMe">
<image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q" x="0" y="-50" height="50px" width="50px"/>
<text fill="#ffffff" x="80" y="0" font-size="48" font-family="Verdana">Kitty Cat</text>
</g>
</svg>

Edit the x and y attributes of the image tag until the cat face is where you would like it.
<svg height="100%" width="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
<image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q" transform="translate(-35.5,-31)" x="25%" y="45%" height="50px" width="50px"/>
<text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Kitty Cat</text>
</svg>

you could use a webfont or an emoji instead of an image...
svg {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px
}
<svg viewBox="0 0 400 200">
<rect x="0" y="0" width="400" height="200" fill="pink" />
<text x="200" y="100" dominant-baseline="middle" text-anchor="middle" font-size="30" font-family="sans serif">
<tspan font-size="50">🐱</tspan>Kitty Cat</text>
</svg>

Onclick in SVG element requires initial two clicks

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>

How to get the position of SVG element

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>