7

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

谢谢。

4

4 回答 4

16

看看这个指令是否有效：

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 }}">

普兰克。您需要“检查元素”或“查看源代码”才能看到 svg 标记。

更新：如果您的应用程序包含 jQuery，请参阅 jQuery中的 attr() 是否强制小写？

@Niahoo 发现如果包含 jQuery，这将起作用（他对这篇文章进行了编辑，但由于某种原因，其他 SO 版主拒绝了它......不过我喜欢它，所以在这里）：

 element.get(0).setAttribute("viewBox", value);
于 2013-01-30T03:44:05.257 回答
12

我自己寻找解决方案我遇到了这个答案，实现这一目标的正确方法是使用模式转换ng-attr-view_box

于 2015-09-14T04:05:33.493 回答
1

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

app.directive('vbox', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('vbox', function (value) {
                element.context.setAttribute('viewBox', value);
            })
        }
    };
});
于 2014-02-28T18:36:22.290 回答
0

在指令链接函数中是这样的（想象一个使用变量的范围）：

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

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

于 2015-02-12T23:32:54.707 回答