将svg拟合到angular.js中的background-image div

Question

如何将SVG作为背景图像放入可能大小可变的DIV容器中？ SVG是动态生成的，所以我实际上需要将DIV容器的宽度和高度传递给我的SVG生成Javascript函数。

我使用angular.js，所以我也希望以正确的方式做到这一点。 ：）

添加re：代码并不多，但是在需要代码示例的SO问题的精神中，这里是我分配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

如果您想以“Angular方式”执行此操作，则应考虑创建directive。

JS - （指令）

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

            });

        });

    };

});

标记（查看）

其中{{svg}}是控制器中的$scope变量：

<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