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

Posted 2023-03-06

【中文标题】将 svg 拟合到 angular.js 中的背景图像 div

【英文标题】：Fitting an svg to background-image div in angular.js

【发布时间】：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，它的大小应适合其容器。

【参考方案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- back-img-></div>

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