将HTML嵌入SVG-如何在与我的SVG内联的HTML命名空间元素中正确呈现HTML标记？

Question

我正在制作交互式SVG图，最终将其嵌入到HTML页面中，但我想使该图完全独立。

我已经在Illustrator中创建了基本的SVG，并且添加了具有以下内容的脚本部分：

• 分配了一些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;
        }
      }
    }

• 此函数由某些SVG元素上的click事件调用，并使用上述函数从JSON中获取有关clicked元素的解释，并将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">

• 然后是infopop组元素的SVG

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

除了JSON的info部分中的HTML标记之外，所有功能都完美地实现了，尽管xhtml命名空间和html父类型<h4>和<p>都在infopop中按原义呈现。（<h4>和<p> do拾取CSS样式就可以了，顺便说一句）]

如何在与我的SVG内联的HTML命名空间元素中正确呈现HTML标记？

Robert的答案适用于基本文本，但不适用于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;