Question

我正在尝试使用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">

感谢。

Answer 1

查看此指令是否有效：

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);

Answer 2

建议的解决方案不起作用。我不是javascript专业版，但确实如此。

app.directive('vbox', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('vbox', function (value) {
                element.context.setAttribute('viewBox', value);
            })
        }
    };
});

Answer 3

在指令链接函数中的这种情况（想象一个范围与使用的变量）：

        var svg = $compile(
            $interpolate('<svg width="{{w}}" height="{{h}}" class="vis-sample" id="vis-sample-{{$id}}" viewBox="0 0 {{w}} {{h}}" preserveAspectRatio="xMidYMid meet"></svg>')( scope )
        )( scope );

关键是在$interpolate之前使用$compile。必须有一个更好的解决方案，但这是我所知道的单通模板最直接的选择，其中变量最初都是可用的。

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

3 个答案: