前端之家收集整理的这篇文章主要介绍了
svg – 如何防止AngularJS制作小写HTML属性,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图用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);