Javascript AngularJS未正确渲染SVG
我有一个指令,它应该将SVG元素附加到指令元素中Javascript AngularJS未正确渲染SVG,javascript,angularjs,svg,Javascript,Angularjs,Svg,我有一个指令,它应该将SVG元素附加到指令元素中 .directive('aSvg', function ($compile) { return { restrict: 'E', replace: true, link: function (scope, element, attrs) { var svgTag = angular.element('<svg viewBox="0 0 4000 2000" ve
.directive('aSvg', function ($compile) {
return {
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
var svgTag = angular.element('<svg viewBox="0 0 4000 2000" version="1.1"><defs><marker id="StartMarker" viewBox="0 0 12 12" refX="12" refY="6" markerWidth="3" markerHeight="3" stroke="green" stroke-width="2" fill="none" orient="auto"><circle cx="6" cy="6" r="5"></circle></marker><marker id="MidMarker" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" stroke="lightblue" stroke-width="2" fill="none" orient="auto"><path d="M 0 0 L 10 10 M 0 10 L 10 0"></path></marker><marker id="EndMarker" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" stroke="red" stroke-width="2" fill="none"><rect x="0" y="0" width="10" height="10"></rect></marker></defs><path d="M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"></path><path d="M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill="none" stroke="tomato" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"></path></svg>');
$compile(svgTag)(scope);
angular.element(svtTag).appendTo(element[0]);
}
};
});
指令('aSvg',函数($compile){
返回{
限制:'E',
替换:正确,
链接:函数(范围、元素、属性){
var svgTag=角度元素(“”);
$compile(svgTag)(范围);
元素(svtTag).appendTo(元素[0]);
}
};
});
在html中,我将指令作为一个元素:
<body>
<div>
<a-svg></a-svg>
</div>
</body>
但是SVG未正确渲染,仅显示2行(黑色和橙色),但未渲染任何标记。示例中使用的SVG似乎是正确的,因为如果我将其保存到文件中,它将正确呈现,但由于某些原因,它在AngularJS中不起作用
我错过了什么
提前谢谢
编辑1:我使用的是AngularJS v1.2.20,我尝试了v1.3.0,但仍然存在相同的问题。经过进一步研究,我发现问题出在角度布线上,更具体地说是在与SVG标记中定义的链接混淆的
标记上
我通过更改每个路径的标记属性中的url解决了问题(注意标记开始
中的/myroute、标记中间
和标记结束
属性):
要了解更多详细信息,我建议阅读该问题的公认答案。不要靠近计算机进行验证,但最后一行看起来很时髦。只需执行:
element.append(svgTag)
仍然得到相同的结果:s。SVG没有呈现标记。不管怎样,泰:)在我看来很好。我看到了记号笔。还有什么不能正确渲染@用户2943490我注意到问题与角度布线有关,我使用的是base
标记(您不在plnkr中)。感谢plnkr,它为我指明了正确的方向。由于解决方案超出了原始问题的范围,我建议删除该问题,因为它对未来的访问者没有任何价值。这太疯狂了。这在旧版本中没有发生。谢谢
<path d="M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(/myroute#StartMarker)" marker-mid="url(/myroute#MidMarker)" marker-end="url(/myroute#EndMarker)"></path>