Question

（N.B。这是another question的后续内容。）

这是一些简单的HTML，CSS和AngularJS，用于显示来自flickr的三张红腹图片：

<html ng-app="AngularSVGTestApp">
<head>
    <title>Angular SVG Image Size Test</title>
    <style>
        svg {
            background-color: aqua;
        }
    </style>
</head>
<body ng-controller="MainCtrl as mainCtrl">
    <div ng-cloak>
        <svg ng-show="mainCtrl.svg.show" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" width="200" height="400">
            <!-- https://www.flickr.com/photos/yeliseev/10116904936 -->
            <image xlink:href="https://farm6.staticflickr.com/5535/10116904936_870f94488d_m.jpg"
                   x="20" y="20"
                   width="100" height="100"/>
            <!-- https://www.flickr.com/photos/yeliseev/112992806 -->
            <image xlink:href="https://farm1.staticflickr.com/38/112992806_780ebcd0ce_m.jpg"
                   x="20" y="140"
                   ng-attr-width="mainCtrl.svg.style.width"
                   ng-attr-height="mainCtrl.svg.style.height" /> 
            <!-- https://www.flickr.com/photos/yeliseev/4433515854 -->
            <image xlink:href="https://farm5.staticflickr.com/4058/4433515854_41152445a9_m.jpg"
                   x="20" y="260"
                   ng-style="mainCtrl.svg.style" />
        </svg>
    </div>
    <script src="/Scripts/angular.js"></script>
    <script>
        angular.module('AngularSVGTestApp', [])
                .controller('MainCtrl', [function () {
                    var self = this;
                    self.svg = {
                        show: true,
                        style: {
                            width: 100,
                            height: 100
                        }
                    };
                }]);
    </script>
</body>
</html>

fiddle

SVG中的三个红腹灰雀图像的大小设置不同。

在HTML
使用ng-attr-width和ng-attr-height将宽度和高度设置为100以绑定到控制器中保存的模型值
使用ng-style将宽度和高度设置为100以绑定到控制器中保存的模型值

为什么后两种方法中的任何一种都不起作用？我应该使用什么来绑定AngularJS中SVG中图像的尺寸？

Answer 1

应该是，这里是doc

 ng-attr-width="{{mainCtrl.svg.style.width}}"
 ng-attr-height="{{mainCtrl.svg.style.height}}"

jsFiddle

对于ngStyle

这是answer。简而言之，我不认为你可以用ngStyle做到这一点。

这是一些ref。它将向您展示如何在CSS中正确执行此操作。

SVG图像的大小是通过ng-attr-width还是ng-style设置的？

1 个答案: