当他们的大小是通过NG-ATTR宽度或NG-样式设置不显示SVG图像？ [英] SVG images not showing when their size is set through ng-attr-width or ng-style?
问题描述
（N.B，这是一个后续的另一个问题。）
(N.B. This is a follow-on from another question.)
下面是一些简单的HTML，CSS和AngularJS以从Flickr显示红腹灰雀的三张图片：
Here is some simple HTML, CSS, and AngularJS to display three pictures of bullfinches from 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中的三个红腹灰雀图像大小的设置方式不同。
The three bullfinch images within the SVG differ in how their size is set.
- 具有其宽度和高度设置为100明确地在HTML
- 有它的宽度和高度使用设置为100
NG-ATTR宽度和NG-ATTR高度来绑定到控制器召开模型值 - 有它的宽度和高度使用
NG-风格绑定到控制器的价值观模型设置为100
- Has its width and height set to 100 explicitly in the HTML
- Has its width and height set to 100 using
ng-attr-widthandng-attr-heightto bind to model values held in the controller - Has its width and height set to 100 using
ng-styleto bind to model values held in the controller
为什么不上述任一后两种方法的工作？我应该使用到的图像在SVG的尺寸从AngularJS绑定？
Why don't either of these latter two methods work? What should I use to bind the dimensions of an image in an SVG from AngularJS?
推荐答案
应该是这样，这里是的 DOC
it should be like, here is the doc
ng-attr-width="{{mainCtrl.svg.style.width}}"
ng-attr-height="{{mainCtrl.svg.style.height}}"
作为ngStyle
下面是<一个href=\"http://stackoverflow.com/questions/19552952/is-it-possible-to-change-svg-included-as-img-element-styles-from-external-cs\">answer 。总之，我不认为你可以做到这一点ngStyle。
here is the answer . In short, I don't think you can do that with ngStyle.
下面是一些 REF 。它表明你如何正确地做到这一点在CSS。
Here is some ref. It shows you how to do it in CSS correctly.
这篇关于当他们的大小是通过NG-ATTR宽度或NG-样式设置不显示SVG图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
