我正在尝试使用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标签。
@Niahoo发现,如果包括jQuery,这是可行的(他对此文章进行了编辑,但是由于某种原因,其他SO版主拒绝了它……我喜欢它,所以在这里):
element.get(0).setAttribute("viewBox", value);