HTML в SVG в HTML - PullRequest
Новая
       3

HTML в SVG в HTML

34 голосов
/ 18 сентября 2011

У меня есть простой SVG-файл, который прекрасно просматривается в Firefox - это какой-то обернутый текст в поле, использующий foreignObject для включения некоторого HTML - текст обернут в div: 

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>

Но никакие толчки не могут сделать эту работу включенным элементом в HTML-документе. Div всегда заканчивается тем, что в документ попадают другие div-ы.

Либо это принципиально невозможно, либо я делаю какую-то ошибку с пространствами имен или что-то в этом роде. Но может ли кто-нибудь обернуть вышеупомянутый SVG в документ HTML и заставить его отображать текст в поле с заданной шириной x высотой в заданной позиции (конечно, относительно SVG или его контейнера)?

Я не видел пример HTML в SVG в HTML, который заставляет меня думать, что я глуп или невозможен - примеры в Интернете, похоже, просто как встраивать HTML в SVG, как описано выше. Я иду глубже.

1 Ответ

41 голосов
/ 18 сентября 2011

Это прекрасно работает для меня: 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...