CODEWITHSUNDEEP
svg
James Lawrie
James Lawrie

Reputation: 27

SVG Mask and Drop Shadow

I am trying to add a drop shadow and mask to SVG text, I have the mask working but the drop shadow isn't being applied to the text.

could i get some help as to how to achieve this.

<svg version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"  xml:space="preserve">
<defs>
    <!-- FILTER DROP SHADOW --> 
 <filter id="dropShadow">
  <feDropShadow dx="0" dy="2" stdDeviation="15" result="shadow"/>
   <feComposite in2="mask" in="shadow" operator="in" result="comp" />
  <feMerge result="merge">
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="comp" />
  </feMerge> 
</filter>
</defs>

<!-- MASKING TEXT -->
<mask maskUnits="userSpaceOnUse" x="-273" y="-353.2" width="3500" height="1500" id="text-mask" result="mask">
    <g id="svg-texts" >
        <text transform="matrix(1 0 0 1 62.9893 260)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
        <text transform="matrix(1 0 0 1 62.9893 500)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
        <text transform="matrix(1 0 0 1 62.9893 750)" style="fill:#FFFFFF; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
    </g>
</mask>

<!-- BUBBLES BG -->
<g id="circles" mask="url(#text-mask)">
<circle cx="50%" cy="50%" r="345" fill="red" />
</g>
</svg>

CodePen Example

Upvotes: 0

Views: 740

Answers (1)

enxaneta
enxaneta

Reputation: 33044

In your example the filter isn't applied anywhere.

If you need to apply the filter to the text I would use the circle as mask and instead of the text like so:

<div id="home-wrapper" >
    
  <svg version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"  xml:space="preserve">
	<defs>
		<!-- FILTER DROP SHADOW --> 
     <filter id="dropShadow">
      <feDropShadow dx="0" dy="2" stdDeviation="15" result="shadow"/>
       <feComposite in2="mask" in="shadow" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge> 
    </filter>
	</defs>
    
	<!-- MASKING TEXT -->
	<mask maskUnits="userSpaceOnUse" x="-273" y="-353.2" width="3500" height="1500" id="text-mask" result="mask">
		<circle cx="50%" cy="50%" r="345" fill="#fff" />
	</mask>
    
	<!-- BUBBLES BG -->
	<g id="circles" mask="url(#text-mask)" >
    
    
    <g id="svg-texts" filter="url(#dropShadow)" >
			<text transform="matrix(1 0 0 1 62.9893 260)" style="fill:#f00; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
			<text transform="matrix(1 0 0 1 62.9893 500)" style="fill:#f00; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
			<text transform="matrix(1 0 0 1 62.9893 750)" style="fill:#f00; font-family:'Source Sans Pro';font-weight: 900; font-size:250px;">TEXT HERE</text>
		</g>
	</g>
</svg>

</div>

Upvotes: 1

Related Questions