Question

我想替换svg标签的图像元素。我希望每次调用一个对象来保存controller.js中的图像，我将拍摄此图像并将此图像表示为svg在名为default.js的不同文件中的模糊背景图像。

我应该怎么做？

default.html：

<div id="backgroundImage">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <filter id="myGaussianBlur" x="0" y="0">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
                </filter>
            </defs>
            <image id="backImage" xlink:href="surf.jpg" width="100%" height="100%" preserveAspectRatio="none" filter="url(#myGaussianBlur)" />
        </svg>
    </div>

我想在其他图片中替换图片id =“backImage”中的图片。

Controller.js：

function setObject(element, value) {
    var id = value.id;
    var image = value.image;
    ????
}

由于

Answer 1

尝试使用原生'setAttribute'。

var im = document.getElementById('backImage');
im.setAttribute('xlink:href',"http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/s480x480/525959_10151097048652029_155651648_n.jpg");
// or mby more correct approach:
//    im.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/s480x480/525959_10151097048652029_155651648_n.jpg");
im.setAttribute('width', X);
im.setAttribute('height', Y);

它适用于chrome，我知道=）

动态替换svg中的图像元素

1 个答案: