当通过 ng-attr-width 或 ng-style 设置大小时，SVG 图像不显示？

Question

(N.B。这是的后续内容。)

这里有一些简单的 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 中正确执行此操作。

当通过 ng-attr-width 或 ng-style 设置大小时，SVG 图像不显示？

SVG images not showing when their size is set through ng-attr-width or ng-style?

angularjs

svg