PROSAGA码农传奇-html/HTML5-动态添加过滤器到SVG

动态添加过滤器到SVG

作者: 林老爷的日常
发布时间: 2025-02-15 10:01:00 (6天前)
转自：

<div class =“post-text”itemprop =“text”>
  
    你需要使用：
    的
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" rel="nofollow noreferrer">
        与Document.createElementNS（...）
      </A>
    </强>
     对于svg元素，在这种情况下
    的
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS" rel="nofollow noreferrer">
        setAttributeNS（...）
      </A>
    </强>
     以及;
  
  
    例如改变：
  
   <pre>
 <code>
 const filter = document.createElement('filter');

</code>
 </pre>
  
    至
  
   <pre>
 <code>
 const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');

</code>
 </pre>
  
    另外更改：
  
   <pre>
 <code>
 feImage.setAttribute('xlink:href', 'http://lorempixel.com/100/100/');

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

</code>
 </pre>
  
    <a href="https://jsfiddle.net/oh3gnp6f/" rel="nofollow noreferrer">
      小提琴
    </A>
  
</DIV>