几何形状的阴影

Question

DarkRou

Asked:2020-04-04 21:39:55 +0000 UTC2020-04-04 21:39:55 +0000 UTC 2020-04-04 21:39:55 +0000 UTC

如何在 svg 元素内发光？

772

当您将鼠标悬停在物体上时，有必要发生眼睛发光的脉动。这项任务是来自眼睛内部的光芒，超越了它的极限。

我觉得我们应该filter: blur()在眼睛里面试一下球，因为我觉得渐变不会很不合适

大致如下图所示，1是初始状态，2是最终状态，反之亦然，所以悬停时开始脉冲是这样的

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"/>
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
<circle cx="1498" cy="1002" r="80" style="fill: #0adaf5;"/>
</svg>

2 个回答

Voted

Alexandr_TT · Answer 1 · 2020-04-07T16:50:52Z

如果你只让眼窝跳动，那么它看起来会有点不自然。

所以我决定先添加瞳孔。为了增加音量，我使用了径向渐变。添加了眼球内瞳孔运动的不显眼动画。

<animate attributeName="fx" begin="0s" dur="8s" values="35%;65%;35%" repeatcount="indefinite" />
          <animate attributeName="fy" begin="0s" dur="4s" values="35%;65%;35%" repeatcount="indefinite" />

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:red;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
}

<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>  
	      <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="0%" stop-color="black"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
           <!-- Анимация движения зрачка	    -->
	   <animate attributeName="fx" begin="0s" dur="8s" values="35%;65%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;65%;35%" repeatcount="indefinite" />
    </radialGradient> 
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="18"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
      </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	    <!-- Обводка глза (глазница)  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/>
         <!-- Зрачок -->
<circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

眼球动画

颜色的组合由眼球的渐变设置。在设置您的应用程序时，总有机会根据您的喜好进行定制

       <!-- Градиент для глазного яблока -->
    <radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="red"/>     
   </radialGradient>

添加了第二个圆圈，该圆圈将填充渐变，创建颜色闪烁的效果。

<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>

属性keyTimes="0;0.15;0.25;0.75;1"用于调整半径增加的不均匀性。

笔记

这些属性中的参数个数必须匹配，否则不起作用：
values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1"

单击 svg 画布开始动画

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:none;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
} 
.eyeball {
stroke:none;
stroke-width:none;
fill: url(#eyeballGrad);
 filter:url(#dropshadow)"
}

<svg  id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>   
	        <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="80%" >
      <stop offset="0%" stop-color="#111111"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
	    <animate attributeName="fx" begin="0s" dur="8s" values="35%;55%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;55%;35%" repeatcount="indefinite" />
    </radialGradient>  
	       <!-- Градиент для глазного яблока -->
	<radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="red"/>	  
   </radialGradient>	  
	  
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
       </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	   <!-- Обводка глза  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/> 
      <!-- Глазное яблоко -->
<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>  
     
 <!-- Зрачок  -->
 <circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

动画循环与循环之间的暂停

<animate id="an_R" attributeName="r" begin="svg1.click;an_R.end+2s" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />

循环由逻辑链执行begin="svg1.click;an_R.end+2s"，其中

svg1.click单击时首次运行动画

an_R.end+2s在第一个动画结束后暂停 2 秒后重新启动

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
.pupil {
stroke:none;
stroke-width:none;
fill: url(#eyeGrad);
 filter:url(#dropshadow)"
} 
.eyeball {
stroke:none;
stroke-width:none;
fill: url(#eyeballGrad);
 filter:url(#dropshadow)"
}

<svg  id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlinkw"
	 width="100%" height="100%" viewBox="0 0 2686 3591" style="background:#151515;" xml:space="preserve">
	 <defs>   
	        <!-- Градиент для зрачка -->
    <radialGradient id="eyeGrad" 
                    fx="50%" fy="50%" r="80%" >
      <stop offset="0%" stop-color="#111111"/>
      <stop offset="100%" stop-color="#0ADAF5"/>
	    <animate attributeName="fx" begin="0s" dur="8s" values="35%;55%;35%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="4s" values="35%;55%;35%" repeatcount="indefinite" />
    </radialGradient>  
	       <!-- Градиент для глазного яблока -->
	<radialGradient id="eyeballGrad" fx="50%" fy="50%" r="100%" 
                    fx="50%" fy="50%" r="100%" >
      <stop offset="10%" stop-color="#FFD877"/>
        <stop offset="90%" stop-color="yellowgreen"/>	  
   </radialGradient>	  
	  
	  <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12"/> 
      <feOffset dx="2" dy="2" result="offsetblur">
       </feoffset>	  
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
	   <!-- Обводка глза  -->
<path id="eye"  class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="fill:#d3d3d3"/> 
      <!-- Глазное яблоко -->
<circle class="eyeball" cx="1490" cy="1004" r="60"  >
        <!-- Анимация глазного яблока   -->
  <animate id="an_R" attributeName="r" begin="svg1.click;an_R.end+2s" dur="2s" 
     values="60;100;80;100;60" keyTimes="0;0.15;0.25;0.75;1" repeatCount="3"
     />
 </circle>  
     
 <!-- Зрачок  -->
 <circle class="pupil" cx="1490" cy="1004" r="60" />
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path id="nose" class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>

</svg>

DarkRou · Answer 2 · 2020-04-05T16:28:49Z

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}

.eye{
    fill: #0adaf5;
}

<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2686 3591" id="svg">
	<defs>
		<filter id="blurCircle" x="-50%" y="-50%" width="200%" height="200%">
			<feGaussianBlur id="blur" in="SourceGraphic" stdDeviation="50"/>
		</filter>
	</defs>
	<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z" style="stroke=35"/>
	<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
		c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
		c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
		c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
		S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
		C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
		c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
	<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
	<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
	<circle cx="1498" cy="990" r="50" class="eye" filter="url(#blurCircle)">
		<animate
				id="blurAnimation"
				attributeName="r"
				values="50; 100; 50"
				dur="3s"
				repeatCount="indefinite"
				fill="remove"
		/>
	</circle>
</svg>

如何在 svg 元素内发光？

动画循环与循环之间的暂停

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何在 svg 元素内发光？

2 个回答

动画循环与循环之间的暂停

相关问题