我不能成功地建立与angularjs的SVG时TSPAN从NG绑定HTML属性负荷，Firefox和IE浏览器不显示它们。
我CONTROLER看起来像：
$scope.titlenotok="svg not ok";
var content = '<tspan dy="20" x="0" xml:space="preserve">line1 not ok</tspan><tspan dy="30" x="0" xml:space="preserve">line 2 not ok</tspan>'
$scope.notok = $sce.trustAsHtml(content);
我创建了一个小提琴说明
http://jsfiddle.net/3WNhT/
对于铬没关系。
罗伯特是正确的。
这里是我的解决方案。 秘诀是使用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>
我的指令添加TSPAN孩子文本的每一行MYDATA和使用数据-DY属性为这个TSPAN DY属性。
