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

我正在制作一个交互式 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;
        }
      }
    }

• 由一个click事件调用某些SVG元素，并使用上述获得从JSON和嵌入式点击的ELEM的解释功能的功能infodata.title和infodata.info成infoTitle和infoText，在infopop区域。

    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>

除了命名空间和 html 父类型&之外，所有功能都完美无缺，除了infoJSON 部分中的 HTML 标记在 infopop 中按字面呈现。（顺便说一句，&确实选择了 css 样式）xhtml<h4><p><h4><p>

如何在 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>"