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);

动态图像加载到svg

1 个答案: