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>

How to change the colour of different rectangles within an svg image, depending on which is clicked?

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().

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 make a line break in a javascript tooltip

In this svg file(KLICK ME) I want to have a more detailed tooltip with more line in it. So I need some kind of linebreak. I tried allready \n, <br> and
with no effect... And I couldn't find anything more on the webs, so I hope some javascript crack may help me :D
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>

Why not use native toolips which should support this?
<a xlink:href="webseite.html">
<title>Toolip
zu b</title>
<rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
Otherwise you'll need to create multiple <text> elements or embed <tspan> elements in the <text> elements so you can assign dy offsets to simulate line breaks. I.e. you'll have to code multiple line support yourself from scratch.
You'll need to generate something like
<text x="10" y="20">Toolip<tspan x="10" dy="1em">zu b</tspan></text>
where the x and y values vary depending on where your object is.
Or. if you don't care about IE support use a foreignObject element for the tooltips and rely on html's text formatting capability to insert line breaks automatically.

You can use an absolute div with a higher z-index as a tooltip if needs be. This supports any sort of html formatting inside it, as it is just a div tag.
Here is a fiddle to demonstrate: http://jsfiddle.net/pbja2ju6/