Menu
I have svg embeded in html.
For svg embeded in html, ie&chrome do not support xml:space=preserve. so multiple " " will condense to one " ". replace " " with   will keep multiple " " and soleve the problem.
Are there any better way to do it? Thank you. please see example html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="0 0 1024 768"
preserveAspectRatio="xMidYMid"
>
<text
x="0"
y="0"
id="textsvg"
font-family="Bitstream Vera Sans"
font-size="100"
fill="black"
>
<tspan
x="0"
dy="100"
>
wel co me vs wel co me
</tspan>
</text>
</svg>
</body>
</html>
234
This works for me in Chrome and Firefox, but not IE9:
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8" /><title>Whitespace in SVG in HTML</title>
</head><body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<text font-size="10" fill="black">
<tspan dy="10" xml:space="preserve">hi—h i—h i—h i</tspan>
</text>
</svg>
</body></html>
Even the SVG-in-XHTML version doesn't work in IE9:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Whitespace in SVG in HTML</title>
</head><body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<text font-size="10" fill="black">
<tspan dy="10" xml:space="preserve">hi—h i—h i—h i</tspan>
</text>
</svg>
</body></html>
You can use this css property on the text element :
text {
white-space: pre;
}
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
