HTML внутри SVG

Question

Я хотел бы добавить разметку HTML в чертеж SVG.

AFAIK это невозможно с SVG.

Изображение отображается в браузере.

Есть ли способ нарисовать HTML поверх SVG?

Поскольку я хочу использовать функции CSS / таблицы HTML, svg <text>Элемента недостаточно.

Answer 1

Пользователь @enxaneta указал мне на foreignObject .

Он отлично работает (даже в веб-браузере Edge).

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
div {
  color: white;
  font: 18px serif;
  height: 100%;
  overflow: auto;
}
  </style>
 
  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
<!--
  In the context of SVG embedded in an HTML document, the XHTML 
  namespace could be omitted, but it is mandatory in the 
  context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
  porta vel dui convallis, rutrum imperdiet eros. Aliquam
  erat volutpat.
</div>
  </foreignObject>
</svg>

CodePen: https://codepen.io/guettli/pen/RwwBxQL

Answer 2

Поскольку я хочу использовать функции CSS в CSS, элемента svg <text> недостаточно.

Вы можете использовать CSS на <text> или на самом деле на любом элементе SVG. Единственное существенное отличие состоит в том, что вы должны использовать fill вместо color, если вам нужно изменить цвет текста. Где будет жить CSS, будет зависеть от того, как вы планируете внедрить изображение на сайте. Если SVG встроен, то есть с помощью тега <img>, стили должны быть встроены в сам файл SVG с использованием тега <defs>, как показано ниже.

<svg width="400" height="110">
<defs>
<style>
.my-custom-text {
fill: #fff;
font-weight: bold;
}
.cyan {
fill: #0ff;
}
</style>
</defs>
<g>
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  <text x="15" y="25" class="my-custom-text">My custom <tspan class="cyan">text</tspan></text>
  </g>
</svg>

Если вы встраиваете SVG, вы можете думать о том, что он работает как HTML - он и его дочерние элементы являются просто обычными элементами HTML и могут бытьцеленаправленный, как и любой другой элемент. Это означает, что CSS может быть размещен везде, где вы обычно его размещаете - как внешний документ или в любом теге <style>.

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

Answer 3

Все, что вам нужно сделать, это дать svg position: absolute, а затем вы можете поместить разметку поверх него. Я не знаю, есть ли способ сделать это в теге svg, если это было то, что вы хотели.