Как применить фильтр после маски в SVG?

Question

У меня есть следующий SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
\t <mask id="mask"> 
 
\t \t <rect x="0" y="0" width="100" height="100" fill="white"/> 
 
\t \t <circle cx="50" cy="50" r="33" fill="black"/> 
 
\t </mask> 
 
\t 
 
\t <filter id="dropShadow"> 
 
\t \t <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
 
\t \t <feOffset dx="4" dy="4"/> 
 
\t \t <feMerge> 
 
\t \t \t <feMergeNode/> 
 
\t \t \t <feMergeNode in="SourceGraphic"/> 
 
\t \t </feMerge> 
 
\t </filter> 
 
\t 
 
\t <circle cx="50" cy="50" r="50" fill="green" filter="url(#dropShadow)" mask="url(#mask)"/> 
 
</svg>

Это в основном кольцо с тенью.
Проблема заключается в том, что тень не видна внутри кольца, потому что фильтр применяется к кругу перед тем, как он замаскирован.

Но я ищу, чтобы применить фильтр к уже замаскированному объекту.
Как я могу это сделать?

PS: В этом тривиальном примере не имеет смысла использовать маску. Это просто объяснить проблему.

Answer 1

Применить фильтр к родительскому объекту маскируемого объекта, например.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
\t <mask id="mask"> 
 
\t \t <rect x="0" y="0" width="100" height="100" fill="white"/> 
 
\t \t <circle cx="50" cy="50" r="33" fill="black"/> 
 
\t </mask> 
 
\t 
 
\t <filter id="dropShadow"> 
 
\t \t <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
 
\t \t <feOffset dx="4" dy="4"/> 
 
\t \t <feMerge> 
 
\t \t \t <feMergeNode/> 
 
\t \t \t <feMergeNode in="SourceGraphic"/> 
 
\t \t </feMerge> 
 
\t </filter> 
 
\t 
 
    <g filter="url(#dropShadow)"> 
 
\t  <circle cx="50" cy="50" r="50" fill="green" mask="url(#mask)"/> 
 
    </g> 
 
</svg>