非SourceGraphic svg元素作爲過濾器的來源？

Question

我們可以創建一個過濾器，它創建一個臨時svg元素並將其作爲源圖形？
像這樣：

<svg version="1.1" width="700" height="700" > 
    <defs> 
     <filter id="f1" x="0" y="0" width="100%" height="100%"> 
      <rect id="rect1" width="30" height="30" fill="#aaaaaa"/> 
      <feComposite in="url(#rect1)" in2="SourceGraphic" operator="over" /> 
     </filter> 
    </defs> 
    <circle cx="50" cy="50" r="50" fill="#ffffff" filter="url(#f1)" /> 
</svg> 

它不工作。

Answer 1

您可以使用< feImage>，就像這樣：

<svg version="1.1" width="700" height="700" > 
    <defs> 
     <filter id="f1" x="0" y="0" width="100%" height="100%"> 
      <feImage xlink:href="#rect1"/> 
      <feComposite in2="SourceGraphic" operator="over" /> 
     </filter> 
     <rect id="rect1" width="30" height="30" fill="blue"/> 
    </defs> 

    <circle cx="50" cy="50" r="50" fill="green" filter="url(#f1)" /> 
</svg> 

見fiddle。但是，某些瀏覽器完全不支持「全屏」，例如Firefox和IE，但它在Chrome和Opera中運行良好。