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

Question

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

我在 Illustrator 中创建了基本的 SVG，并添加了一个脚本部分，其中包含以下内容：

分配了一些 JSON 的变量（JSON 看起来像这样）


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

从单击的 svg 元素和 returns JSON 中具有该引用的行获取引用的函数。


    function findInfo(idValue) {
      for (var i=0; i &lt; 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>

除了 JSON 的 info 部分中的 HTML 标记在 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" : "&lt;ol&gt;
      &lt;li&gt;Research who your users are&lt;/li&gt;
      &lt;li&gt;Plan your research&lt;/li&gt;
      &lt;li&gt;Interview your users&lt;/li&gt;
      &lt;li&gt;Write up the requirements&lt;/li&gt;
      &lt;li&gt;Work with your design team and development team to architect your solution and design the user experience&lt;/li&gt;
    &lt;/ol&gt;"

终于 ;-) 这有效！全部一行，没有换行符：

"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 来设置信息文本，例如

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

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

Embedding HTML into SVG - How can I render the HTML markup correctly in HTML namespaced elements, inline with my SVG?

html

svg

xhtml