Значительные пробелы в SVG встроены в HTML - PullRequest
Новая
       13

Значительные пробелы в SVG встроены в HTML

7 голосов
/ 11 ноября 2011

У меня svg встраивается в html.

Для svg встраивается в html, т.е. & 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&nbsp;co&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me
</tspan>
</text>

</svg>
</body>
</html>

1 Ответ

8 голосов
/ 12 ноября 2011

Это работает для меня в 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>
...