svg - SVG 蒙版和投影

问题描述

我正在尝试向 SVG 文本添加阴影和遮罩，我的遮罩可以正常工作，但阴影没有应用于文本。

我能得到一些关于如何实现这一目标的帮助吗？

<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 示例

标签： svg

在您的示例中，过滤器未在任何地方应用。

如果您需要将过滤器应用于文本，我将使用圆圈作为蒙版，而不是像这样的文本：

<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>

svg - SVG 蒙版和投影

问题描述

解决方案

推荐阅读