Question

我想使用JavaScript删除背景图片中根viewBox元素的svg属性。我该怎么做？

＆＃13;

.box {
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/86/CC-logo.svg);
  background-repeat: no-repeat;
  background-size: auto auto;
  width: 300px;
  height: 150px;
  border: 1px solid;
}

＆＃13;

<div class="box">
  stretch background
</div>

＆＃13;

以下是SVG文件中的前几个字符。

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 123">

Answer 1

您可以将SVG fragment identifier与viewBox（无）

一起使用

将网址更改为

http://upload.wikimedia.org/wikipedia/commons/8/86/CC-logo.svg#svgView(viewBox(none))

这适用于Firefox（并且在Opera 12中有效）。不确定有多少其他UA支持来自SVG 1.2 tiny的viewBox（无）。

Answer 2

回答我自己的问题。我不会接受它。仅供演示之用。此代码段在Chrome和Firefox中经过测试。仅适用于Firefox。它使用CSS属性动画，CSS过渡和SVG片段标识符动画集于一身。

＆＃13;

    function SVGBackground(elm, url) {
        this.elm = elm;
        this.url = url;

        this.stretch = function() {
            this.elm.style.backgroundImage = 'url(\'' + this.url + '#svgView(preserveAspectRatio(none))' + '\')';
        }
        this.setViewBox = function(minx, miny, width, height) {
            this.elm.style.backgroundImage = 'url(\'' + this.url + '#svgView(preserveAspectRatio(none);viewBox('
                + minx + ',' + miny + ',' + width + ',' + height + '))' + '\')';
        }
    }
    window.onload = function() {
        var box = document.querySelector('.box');

        var svgBg = new SVGBackground(box, 'http://upload.wikimedia.org/wikipedia/commons/8/86/CC-logo.svg');
        svgBg.stretch();
        var w = 0, h = 0;
        var aspect = 512 / 123;
        var interval = setInterval(function() {
            if(w > 512) {
                clearInterval(interval);
                svgBg.stretch();
                $(box).css('background-size', '100% 100%');
                $(box).animate({
                    "opacity": '1',
                }, 400);
                return;
            }
            w+=5;h+=5 / aspect;
            svgBg.setViewBox(0,0,w,h);
        }, 1000 / 60);

    }

＆＃13;

.box {
  width: 500px;
  height: 123px;
  background-size: 20% 50%;
  transition: background-size 0.4s;
  opacity: 0.5;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

＆＃13;

如何使用JavaScript操作SVG背景图像

2 个答案: