我试图用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">
谢谢.
看看这个指令是否有效：
app.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);
