本文介绍了动态替换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 =)
更多推荐
动态替换svg中的图像元素
发布评论