All geek questions in one place

Significant gaps in SVG embedded in HTML

I have svg embedded in html.

For svg embedded in html i.e. chrome does not support xml: space = preserve. therefore, several "will condense to one." replace "with & nbsp will contain several" "and solve this problem.

Is there a better way to do this? Thanks. see html example 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&nbsp;co&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me </tspan> </text> </svg> </body> </html>
+6
source share
1 answer

This works for me in Chrome and Firefox, but not in 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—hi—hi—h i</tspan> </text> </svg> </body></html>

Even the SVG-in-XHTML version does not 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—hi—hi—h i</tspan> </text> </svg> </body></html>
+7
source

Source: https://habr.com/ru/post/901245/

More articles:


All Articles