主页 / 问题 / 995020
Accepted
Air
Asked:2020-06-21 14:24:18 +0000 UTC2020-06-21 14:24:18 +0000 UTC

如何在 SVG 上实现背景剪辑线性渐变和混合混合模式示例的模拟

  • 772

有一个动画的例子

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  mix-blend-mode: multiply;
  animation: gradient-top 3s linear infinite;
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 1s ease-in-out;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}
<div class="test-grad">Test gradient</div>

如何在 SVG 中实现这一点？

有人可能会有疑问А чем не устраивает данная реализация?，问题是它在FF中不起作用。

在 Mozilla 浏览器中运行下面的示例，就会清楚问题所在。

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  background-size: 100% 100%;
  background-position: top;
}
<div class="test-grad">Test gradient</div>

但是，如果有一个没有解决方案的解决方案，SVG并且这个示例适用于什么，那FF也很好......

但是有一个解决方案FF，但是没有mix-blend-mode: multiply;，我不知道在哪里添加mix-blend-mode

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.wrapper {}

.test-grad {
  margin: 100px auto;
  background-image: linear-gradient(to top, #fff 50%, #27272700 50%);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-size: 100% 200%;
  background-position: top;
  animation: gradient-top 3s linear infinite;
}

.test-grad p {
  color: transparent;
  font-size: 95px;
  font-family: 'Anton', sans-serif;
  text-align: center;
  background-image: linear-gradient(to top, #272727 50%, #fff 50%);
  background-size: 100% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-top 3s linear infinite;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}
<div class="wrapper">
  <div class="test-grad">
    <p>Test gradient</p>
  </div>
</div>

html

1 个回答

  1. Best Answer

    工作，接受的选项 -#3
    前两个选项不完全满足问题中的要求。

    代码注释中的解释。

    #1。
    点击图片后动画开始。 

    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >   
	
	<style>
      @import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
    </style>
	
	<defs> 
	  <mask id="msk1"> 
	    <!-- показывает весь фон -->
	     <rect width="100%" height="100%" fill="white" />
		<!-- Текстовая маска вырезает надпись -->		 
	    <text x="1050" y="495" font-size="120px" font-family="'Anton'" font-weight="700" text-anchor="middle" fill="black"> Test gradient</text> 
	  </mask>
	</defs>
 <image xlink:href="https://isstatic.askoverflow.dev/x9F0b.jpg" width="100%" height="100%"  />
     <!-- Чёрный прямоугольник с применением текстовой маски -->
   <rect x="0" y="380" width="1920" height="135" fill="black" mask="url(#msk1)" >
      <!-- анимация уменьшения, увеличения высоты прямоугольника -->
	 <animate attributeName="height" dur="6s" values="135;0;0;135;135" begin="svg1.click" repeatCount="indefinite" />
	</rect> 
	
</svg>

    #2。黑白文本动画的另一种选择

    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >   
	
	<style>
      @import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
    </style>
	
	<defs> 
	  <mask id="msk1"> 
	    <!-- показывает весь фон -->
	     <rect width="100%" height="100%" fill="white" />
		<!-- Текстовая маска вырезает надпись -->		 
	    <text x="1050" y="495" font-size="120px" font-family="'Anton'" font-weight="700" text-anchor="middle" fill="black"> Test gradient</text> 
	  </mask> 
	   <mask id="msk2"> 
       <rect width="100%" height="100%" fill="white" />	  
	  <rect x="0" y="380" width="1920" height="0" fill="black" >
     
	 <animate attributeName="height" dur="6s" values="0;135;135;0;0" begin="svg1.click" repeatCount="indefinite" />
	</rect>  
	     <text x="1050" y="495" font-size="120px" font-family="'Anton'" font-weight="700" text-anchor="middle" fill="white"> Test gradient</text> 
	   </mask>
	</defs>
 <image xlink:href="https://isstatic.askoverflow.dev/x9F0b.jpg" width="100%" height="100%" mask="url(#msk1)" />
     <!-- Чёрный прямоугольник с применением текстовой маски -->
   <rect x="0" y="380" width="1920" height="135" fill="black" mask="url(#msk2)"> 
      <!-- анимация уменьшения, увеличения высоты прямоугольника -->
	  <animate attributeName="height" dur="6s" values="135;0;0;135;135" begin="svg1.click" repeatCount="indefinite" />
	</rect> 
	
</svg>

    #3。选项使用clipPath和mask

    clipPath从黑色矩形
    mask中剪下黑色铭文 从黑色条中剪下铭文，黑色条上填充有背景图像

    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">   
	
	<style>
      @import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
    </style>
	
	<defs> 
	  <mask id="msk1"> 
	    <!-- показывает весь фон -->
	     <rect width="100%" height="100%" fill="white"  />
		<!-- Текстовая маска вырезает надпись -->		 
	    <text x="1050" y="495" font-size="120px" font-family="'Anton'" font-weight="700" text-anchor="middle" fill="black"> Test gradient</text> 
	  </mask>
	  
	    <clipPath id="clip1"> 
	       <text x="1050" y="495" font-size="120px" font-family="'Anton'" font-weight="700" text-anchor="middle" fill="black"> Test gradient</text> 
		
	  </clipPath>
	</defs>
 <image xlink:href="https://isstatic.askoverflow.dev/x9F0b.jpg" width="100%" height="100%"  />
   
	<rect x="0" y="380" width="1920" height="135" fill="black" mask="url(#msk1)" >
     
	 <animate attributeName="height" dur="4s" values="135;0;0;135;135"  repeatCount="indefinite" /> 
	</rect> 
	   <!-- здесь вырезается и анимируется чёрный цвет надписи -->
	 <rect x="0" y="245" width="1920" height="135" fill="black" stroke="black" clip-path="url(#clip1)" >
	   <animate attributeName="y" dur="4s" values="245;380;380;245;245"  repeatCount="indefinite" /> 
	</rect> 
	
</svg>

    • 3

相关问题