我在 html 中嵌入了 svg。
对于嵌入在html中的svg，ie&chrome不支持xml:space=preserve。所以多个“”将浓缩为一个“”。用 替换 ""将保留多个 ""并解决问题。
有没有更好的方法呢？谢谢你。请参阅下面的示例 html:
<!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:
<!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 中也不起作用:
<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>
关于xml - HTML 中嵌入的 SVG 中的重要空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8086292/