罗伯特是对的。
这是我的解决方案。秘诀是使用 createElementNS。这样,浏览器就知道它是 svg 元素而不是 html 元素。
这是指令
app.directive('multilinesvgtext', function () {
var xmlns = "http://www.w3.org/2000/svg";
var myLink = function (scope, elem, attrs) {
attrs.$observe('contenu', function (val) {
var data = val;
var generateTSpan = function (lineOftext) {
var tspanElement = document.createElementNS(xmlns, 'tspan');
tspanElement.setAttribute('x', attrs.x);
tspanElement.setAttribute('dy', attrs.dy);
tspanElement.setAttribute('class', attrs.class);
tspanElement.setAttribute('xml:space', 'preserve');
var tspanContent = document.createTextNode(lineOftext);
tspanElement.appendChild(tspanContent);
return tspanElement;
};
// We delete the old children
while (elem[0].firstChild) {
elem[0].removeChild(elem[0].firstChild);
}
var lines = data.split('\n');
for(var i= 0; i < lines.length; i++)
{
var textContent = lines[i]!=='' ? lines[i] : ' ';
var newTspanElement = generateTSpan(textContent);
elem[0].appendChild(newTspanElement);
}
});
};
return {
restrict: 'A',
link: myLink
};
}
);
可以这样使用:
<text multilinesvgtext x="30" y="168" fill="#FFFFFF" data-dy="13" class="myclass" data-contenu="{{mydata}}"></text>
我的指令为 mydata 中的每一行文本添加 tspan 子项,并使用 data-dy 属性作为此 tspan 的 dy 属性。