在Angular.js中将SVG拟合到背景图像div

Question

How do I fit an SVG as background-image to a DIV container that could be of variable size? The SVG is generated dynamically, so I actually need to pass the width and height of the DIV container to my SVG-generating Javascript function.

I'm using angular.js, so I would also like to do it in the right way. :)

There's not much to add re: code, but in the spirit of SO questions needing code examples, here is where I assign the SVG:

var str = 'url("data:image/svg+xml;utf8,'+s+'")';    
$("#token-creator").css({'background-image': str, 'background-repeat':'no-repeat', 'background-opacity': .04});

Answer 1

If you want to do this the "Angular way", you should consider creating a directive .

JS - (Directive)

app.directive('backImg', function(){

    return function(scope, element, attrs){

        attrs.$observe('backImg', function(value) {

            var url = attrs.backImg;
            var size = attrs.backImgSize || 'cover';
            var width = attrs.backImgWidth;
            var height = attrs.backImgHeight;

            element.css({

                'background-repeat' : 'no-repeat',
                'background-image': 'url(' + value +')',
                'background-size' : size,
                '-webkit-background-size': size,
                '-moz-background-size': size,
                '-ms-background-size': size,
                'width': width,
                'height': height

            });

        });

    };

});

Markup (View)

where {{svg}} is a $scope variable in your controller:

<div back-img="{{svg}}" back-img-size="contain" back-img-width="500px" back-img-height="500px"></div>

Plunk : http://plnkr.co/edit/jw48qHwk7A2ctHBQT1TW?p=preview