问SVG蒙版和投影
EN

Stack Overflow用户

提问于 2020-02-12 08:26:11

回答 1查看 194关注 0票数 0

我正在尝试添加一个投影和蒙版到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 Example

svg

回答 1

Stack Overflow用户

发布于 2020-02-12 16:41:22

在您的示例中，筛选器不会应用于任何地方。

如果您需要对文本应用过滤器，我将使用圆圈作为掩码，而不是文本，如下所示：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60179352

复制

相似问题

问SVG蒙版和投影
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG蒙版和投影EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG蒙版和投影
EN