Question

我在网页上内联了以下SVG图片：

const svg = document.getElementById('svg');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'image');
filter.setAttribute('x', '0%');
filter.setAttribute('y', '0%');
filter.setAttribute('width', '100%');
filter.setAttribute('height', '100%');
const feImage = document.createElementNS('http://www.w3.org/2000/svg', 'feImage');
feImage.setAttribute('xlink:href', 'http://lorempixel.com/100/100/');
filter.appendChild(feImage);
svg.querySelector('defs').appendChild(filter);
svg.querySelector('circle').setAttribute('filter', 'url(#image)');

<svg width="200" height="200" viewBox="0 0 200 200" id="svg">
<defs></defs>
<circle cx="100" cy="100" r="50" fill="none" stroke-width="2" stroke="gray"></circle>
</svg>

现在，我想向此svg动态添加图像滤镜，然后将滤镜应用于圆。但是发生的是圆变得不可见，过滤器无法工作。

当我将过滤器添加到svg硬编码时，一切正常：

<svg width="200" height="200" viewBox="0 0 200 200" id="svg">
        <defs>
            <filter id="image" x="0%" y="0%" width="100%" height="100%">
                <feImage xlink:href="http://lorempixel.com/100/100/"></feImage>
            </filter>
        </defs>
        <circle cx="100" cy="100" r="50" fill="none" stroke-width="2" stroke="gray" filter="url(#image)"></circle>
</svg>

我的问题是为什么这行不通？

Answer 1

您需要使用： document.createElementNS(…) 用于svg元素，在这种情况下，还需要使用 setAttributeNS(…) ；

例如更改：

 const filter = document.createElement('filter');

到

 const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');

其他更改：

feImage.setAttribute('xlink:href', 'http://lorempixel.com/100/100/');

到

feImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://lorempixel.com/100/100/');

fiddle

动态将过滤器添加到SVG

1 个答案: