角度指令未在 SVG 中呈现答案

【问题标题】：Angular directives not rendered in SVG角度指令未在 SVG 中呈现
【发布时间】：2014-12-16 00:04:08
【问题描述】：

我正在用 Angular 和 SVG 做一些实验。

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

起初，它根本不起作用，但我发现了这个有趣的链接：Including SVG template in Angularjs directive，我把这个svgService 包括在内。它适用于我测试过的所有东西，除了一件事。它缺少<text> 标签的内容。

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

这是plunker。

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

在我看来，您的代码运行良好。我发现的这个问题是 AAAA 的 x 和 y 的值不在可视区域内。我把代码改成这样了。

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

它映入眼帘。需要考虑的几件事是可视区域的大小，以及可视区域内元素的位置。希望对您有所帮助。

【讨论】：

我按照您的建议更改了文本的坐标，但我仍然无法看到文本 AAA，我现在要在 Chrome 中尝试（它在 firefox 中不起作用）。编辑：能够看到 chrome 中的所有文本。但在 Firefox 中，它只显示“文本”（不是指令的一部分）和“SVG 下方”（不是 SVG 的一部分）。