我试图用AngularJS渲染一些SVG但我无法动态更改svg元素的视图框.
Angular呈现“viewBox”属性,但浏览器需要“viewBox”属性.结果是:
<svg height="151px" width="1366px" viewBox="{{ mapViewBox }}" viewBox="-183 425 1366 151">
我怎样才能得到我期望的结果:
<svg height="151px" width="1366px" viewBox="-183 425 1366 151">
谢谢.
看看这个指令是否有效:
原文链接:https://www.f2er.com/angularjs/143301.htmlapp.directive('vBox',function() { return { link: function(scope,element,attrs) { attrs.$observe('vBox',function(value) { element.attr('viewBox',value); }) } }; });
HTML:
<svg height="151px" width="1366px" vBox="{{ mapViewBox }}">
Plnkr.您需要“检查元素”或“查看源代码”才能看到svg标记.
更新:如果您的应用包含jQuery,请参阅Does the attr() in jQuery force lowercase?
@Niahoo发现如果包含jQuery,它就有用了(他对这篇文章进行了编辑,但出于某种原因,其他SO主持人拒绝了它……我喜欢它,所以这里是):
element.get(0).setAttribute("viewBox",value);