Angularjs SVG图像在通过ng attr WITH或ng style设置其大小时不显示？_Angularjs_Svg

Angularjs SVG图像在通过ng attr WITH或ng style设置其大小时不显示？

angularjs svg

Angularjs SVG图像在通过ng attr WITH或ng style设置其大小时不显示？,angularjs,svg,Angularjs,Svg,（注意：这是来自的后续内容。）下面是一些简单的HTML、CSS和AngularJS，用于显示flickr中的三张牛雀图片： <html ng-app="AngularSVGTestApp"> <head> <title>Angular SVG Image Size Test</title> <style> svg { background-color: aqua;

（注意：这是来自的后续内容。）

下面是一些简单的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>


角度SVG图像大小测试
svg{
背景色：浅绿色；
}
角度模块（'AngularSVGTestApp'，[]）
.controller（'MainCtrl'，[函数（）{
var self=这个；
self.svg={
秀：没错，
风格：{
宽度：100，
身高：100
}
};
}]);

SVG中的三个bullfinch图像的大小设置方式不同

在HTML中将其宽度和高度显式设置为100

使用

ng attr width

和

ng attr height

绑定到控制器中保存的模型值，将其宽度和高度设置为100

使用

ng style

将其宽度和高度设置为100，以绑定到控制器中保存的模型值

为什么后两种方法都不起作用？在AngularJS的SVG中，我应该使用什么来绑定图像的维度？

应该是这样的，下面是

至于风格

这是你的电话号码。简言之，我认为你不能用ngStyle做到这一点

这里有一些。它向您展示了如何在CSS中正确地执行此操作

谢谢，行得通。我感到困惑的是，

ng show=“mainCtrl.svg.show”

没有双卷发就可以工作，但是

ng attr width=“mainCtrl.svg.style.width”

没有。你能解释为什么

ng attr width

和

ng attr height

需要双卷发，但

ng show

不需要双卷发吗。简而言之，它只是绑定指令范围的另一种方式。这实际上取决于您创建指令的方式。

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