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

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 元素上的点击事件调用的函数，并使用上述函数从 JSON 中获取点击元素的解释，并将 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>

除了 info 部分中的 HTML 标记之外，所有功能都完美无缺，尽管 xhtml 命名空间和 html 父类型 <h4> 和 <p> 在 infopop 中逐字呈现。 （<h4> & <p> 做 顺便提一下 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;