javascript - 将 svg 安装到 angular.js 中的背景图像 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

            });

        });

    };

});

标记( View )

其中 {{svg}} 是 Controller 中的 $scope 变量:

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

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