svg – 如何防止AngularJS制作小写HTML属性

发布时间：2020-12-17 07:50:44 所属栏目：安全来源：网络整理

导读：我试图用AngularJS渲染一些SVG但我无法动态更改svg元素的视图框. Angular呈现“viewbox”属性,但浏览器需要“viewBox”属性.结果是： svg height="151px" width="1366px" viewBox="{{ mapViewbox }}" viewbox="-183 425 1366 151" 我怎样才能得到我期望的结

我试图用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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!