将 svg 拟合到 angular.js 中的背景图像 div

【问题标题】：Fitting an svg to background-image div in angular.js将 svg 拟合到 angular.js 中的背景图像 div
【发布时间】：2014-12-10 19:40:28
【问题描述】：

如何将 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});

【问题讨论】：

如果您创建宽度/高度为 100% 的 SVG，它的大小应适合其容器。

标签： javascript jquery css angularjs svg

【解决方案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

【讨论】：