{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《SVG images not showing when their size is set thro》','https://www.manongdao.com/q-984307.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
(N.B. This is a follow-on from another question.)
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>
The three bullfinch images within the SVG differ in how their size is set.
- 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
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?
it should be like, here is the doc
jsFiddle
as for ngStyle
here is the answer . In short, I don't think you can do that with ngStyle.
Here is some ref. It shows you how to do it in CSS correctly.