Встраивание HTML в SVG. Как правильно отобразить HTML-разметку в элементах пространства имен HTML, встроенных в SVG?

Question

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

Я создал базовую SVG в Illustrator и добавилсекция сценария, которая имеет следующее:

• Переменная, которой назначен некоторый JSON (JSON выглядит следующим образом)

    var infodata =
        [{
          "id" : "step1",
          "title" : "Step 1",
          "info" : "<i>This is DevOps step one</i>"
        },{etc}];

• Функция, которая принимаетссылка из элемента svg, по которому щелкнули, и возвращает строку в JSON, содержащую эту ссылку.

    function findInfo(idValue) {
      for (var i=0; i < infodata.length; i++){
        if (infodata[i]['id'] == idValue){
          return (infodata[i]);
          break;
        }
      }
    }

• Функция, которая вызывается событием click для определенных элементов SVG и использует функциювыше, чтобы получить объяснение нажатого элемента из JSON и вставить infodata.title и infodata.info в infoTitle и infoText, в области инфопопа.

    function showInfopop(evt){
       thisInfo=evt.target;
       thisInfoRef = thisInfo.getAttributeNS(null,'inforef');
       info = findInfo(thisInfoRef);
       infoTitle = info.title;
       infoText = info.info;
       document.getElementById('infoTitleContent').textContent = infoTitle;
       document.getElementById('infoTextContent').textContent = infoText;
    }

• Открывающий тег SVG

    <svg
        id="Layer_1"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        width="1369"
        height="828"
        viewBox="0 0 1369 828">

• Затем SVG для элемента группы infopop

    <g id='infopopGroup'>
      <foreignObject
        x="100"
        y="10"
        overflow="scroll"
        width="150px"
        height="100px"
        requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
        id="foreignObject_test">
        <xhtml:div  xmlns="http://www.w3.org/1999/xhtml"
          class="InfopopRect">
          <xhtml:h4
            class="InfoTitle"
            id="infoTitleContent">
              Info
          </xhtml:h4>
          <xhtml:p
            class="InfoText"
            contentEditable="true"
            id="infoTextContent">
              &lt;i&gt;Click on circles for details of the DevOps lifecycle&lt;/i&gt;
          </xhtml:p>
        </xhtml:div>
      </foreignObject>
    </g>

Все это прекрасно работает, за исключением разметки HTMLв разделе infoJSON отображается буквально в infopop, несмотря на пространство имен xhtml и родительские типы html <h4> & <p>.(<h4> & <p> do очень хорошо выбирают стили CSS)

Как правильно отобразить HTML-разметку в элементах пространства имен HTML, встроенных в мойSVG?

Ответ Роберта сработал для основного текста, но не для более богатой разметки в JSON, такой как

    var infodata = 
    [{ "id" : "step1", 
    "title" : "Requirements capture", 
    "info" : "<ol>
    <li>Research which users</li>
    <li>Plan your research</li>
    <li>Interview your users</li>
    <li>Write up the requirements</li>
    <li>Work with design team and development team to architect your solution and design the user experience</li>
    </ol>" },
    { "id" : "step6", 
    "title" : "Step 6", 
    "info" : "&lt;i&gt;This is DevOps step six&lt;/i&gt;" }];

или

      "id" : "step1",
      "title" : "Requirements capture",
      "info" : "<ol>
      <li>Research who your users are</li>
      <li>Plan your research</li>
      <li>Interview your users</li>
      <li>Write up the requirements</li>
      <li>Work with your design team and development team to architect your solution and design the user experience</li>
    </ol>"

И, наконец,;-) Это работает!Вся одна строка, без разрывов строк:

"info" : "<ol><li>Research who your users are</li> <li>Plan your research</li> <li>Interview your users</li> <li>Write up the requirements</li> <li>Work with your design team and development team to architect your solution and design the user experience</li> </ol>"

Answer 1

Вам нужно использовать innerHTML, а не textContent для установки infoText, например,

document.getElementById('infoTextContent').innerHTML = infoText;