NG-的bind-HTML的文本SVG标签不Firefox和IE显示TSPAN [英] ng-bind-html in a svg text tag do not display tspan in firefox and IE
问题描述
我不能成功地建立与angularjs的SVG时TSPAN从纳克绑定HTML属性负荷,Firefox和IE浏览器不显示出来。
I can't succeed in build an svg with angularjs when tspan are load from ng-bind-html attribute, Firefox and IE do not display them.
我CONTROLER样子的:
My controler look like that :
$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);
我创建了一个小提琴说明
I create a fiddle to illustrate
有关铬没关系。
推荐答案
罗伯特是正确的。
下面是我的解决方案。
秘诀是使用createElementNS。从而,浏览器理解,这是一个svg元素,而不是一个html元素
Here is my solution. The secret was to use createElementNS. so that, The browser understand that it is a svg element and not a html element.
下面是指令
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
};
}
);
这可以使用这样的:
Which can be uses like that :
<text multilinesvgtext x="30" y="168" fill="#FFFFFF" data-dy="13" class="myclass" data-contenu="{{mydata}}"></text>
我的指令添加TSPAN孩子文本的每一行MYDATA和使用数据-DY属性作为DY属性,这TSPAN。
My directive add tspan children for each line of text in mydata and use data-dy attribute as dy attribute for this tspan.
这篇关于NG-的bind-HTML的文本SVG标签不Firefox和IE显示TSPAN的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!