Подтвердить что ты не робот

HTML в SVG в HTML

У меня есть простой файл 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>

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Это отлично работает для меня:

<!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>