Situation: have an image in svg:
<filter id="svg-filter-blur">
<feGaussianBlur stdDeviation="10,10" />
</filter>
<image id='view-photo-svg' x="0%" y="0%" width="100%" height="100%"
filter="url(#svg-filter-blur)"/>
Tried to make this way:
var photo = new Image();
photo.src = 'photos/h5.jpg';
photo.addEventListener('load', function(){
render();
});
and in render():
var photoDOM = document.getElementById('view-photo-svg');
photoDOM.setAttribute('src', "url('" + photo.src + "')");
or
photoDOM.setAttribute('xlink:href', photo.src);
Doesn't work. Any suggestions?
Perfect scenario:
have an access to image parameters/events(such as onload)
can apply filters/clipping to it
Attributes in a non-null namespace must be set via setAttributeNS so you need this...
photoDOM.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', photo.src);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments