javascript - 动态图像加载到 svg

Question

情况:有 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)"/>

尝试这样做:

var photo = new Image();
    photo.src = 'photos/h5.jpg';

    photo.addEventListener('load', function(){
        render();
    });

以及在render()中:

var photoDOM = document.getElementById('view-photo-svg');
    photoDOM.setAttribute('src', "url('" + photo.src + "')"); 

或

    photoDOM.setAttribute('xlink:href', photo.src);

不起作用。 有什么建议吗？

完美场景:

• 有权访问图像参数/事件(例如onload)

• 可以对其应用滤镜/剪辑

Answer 1

非空命名空间中的属性必须通过 setAttributeNS 设置所以你需要这个...

photoDOM.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', photo.src);