Question

我正在使用Angular和SVG进行一些实验。

我创建了一个简单的指令，并且我尝试渲染来自模板的<text>元素。

起初，它根本没有工作，但我发现了这个有趣的链接：Including SVG template in Angularjs directive我加入了这个svgService。除了一件事，它对我测试的所有东西都很好。它错过了<text>代码的内容。

我试图在指令中修改compile函数的代码，但没有成功。我不是DOM的专家。

这里是plunker。

代码不输出错误。我不得不添加一些测试来查看rawElement是否未定义。我的问题似乎是childNode（表示<text>的内容的行为与其他节点不同。为什么会这样？我该如何修复该功能？感谢

编辑：文本在Chromium中呈现，但不在Firefox中呈现。有没有办法让它在Firefox中运行？

Answer 1

您应该使用textContent而不是innerText来复制文本数据，即

    // set the text from the template
    if(rawElement.localName === 'text'){
        replacement.textContent = rawElement.textContent;
    }

Firefox不支持非标准的innerText属性，只支持符合标准的textContent。

Answer 2

对我来说，看起来你的代码工作得很好。我发现这个问题是AAAA的x和y值不在可查看区域内。我改变代码看起来就是这样。

<text
    fill="#000000"
    x="0"
    y="5">
    AAAA
</text>

它进入了视野。需要考虑的几件事是可视区域的大小，以及可视区域内元素的位置。我希望这会帮助你。