Могу ли я вставлять HTML в фрагмент SVG HTML5?

HTML5 поддерживает тег <svg>, позволяющий вставлять SVG в HTML.

Копаясь немного глубже, могу ли я вставить некоторый HTML внутри моего фрагмента <svg>? Например, я хотел бы поместить CSS'ed <table> в какую-то часть моей графики SVG.

Я сделал небольшой тест, и Chrome12 не понравился HTML <p> внутри <svg>. Есть ли какой-нибудь способ заставить его работать (например, тег контейнера html?)?

Ответ 1

Да, с элементом <foreignObject> см. этот вопрос для некоторых примеров.

В качестве альтернативы, если у вас есть документ html5, вы также можете использовать позиционирование CSS и z-index, чтобы сделать части html видимыми, где вы хотите выложить поверх svg. Если вы это сделаете, вам не нужно вставлять html внутри фрагмента svg. Это даст вам наиболее последовательное поведение в браузерах в моем опыте.

Ответ 2

Внешние объекты не поддерживаются в Internet Explorer. Проверьте ForeignObject

Ответ 3

В соответствии с текущей ссылкой w3c вы можете Embed SVG Directly Into HTML Pages. Это ниже ссылки, в которой говорится, что в HTML с тем же тегом, что и HTML4.

https://www.w3schools.com/graphics/svg_inhtml.asp

Существует и другая ссылка, которая также имеет пример.

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

https://www.w3.org/wiki/HTML/Elements/svg

 <!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>