嵌入HTML的SVG中的重要空白 [英] Significant whitespace in SVG embedded in HTML
本文介绍了嵌入HTML的SVG中的重要空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在html中嵌入了svg.
I have svg embeded in html.
对于嵌入html(即& chrome)中的svg，不支持xml:space = preserve.因此多个"将凝结为一个".用& nbsp替换"将保留多个"并解决问题.
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.
还有更好的方法吗?谢谢你.请参见下面的示例html:
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>
推荐答案
这对我适用于Chrome和Firefox，但不适用于IE9:
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>
即使SVG-in-XHTML版本在IE9中也不起作用:
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>
这篇关于嵌入HTML的SVG中的重要空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
