动态替换svg中的图像元素

本文介绍了动态替换svg中的图像元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I would like to replace an image element of svg tag. I want that every call to an object which holds the image in controller.js, i will take this image and represent this image as a blur background image by svg in different file called default.js.

我应该怎么做？

default.html：

default.html :

<div id="backgroundImage"> <svg xmlns="www.w3/2000/svg" xmlns:xlink="www.w3/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>

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

I would like to replace the image in image id ="backImage" in other image.

Controller.js：

Controller.js:

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

谢谢

推荐答案

尝试使用原生'setAttribute'。

Try making use of native 'setAttribute'.

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

它适用于chrome，我知道=）

It works in chrome, all i know =)