如何将框阴影添加到 svg 路径圆形答案

【问题标题】：How to add box-shadow to a svg path circle shape如何将框阴影添加到 svg 路径圆形
【发布时间】：2019-11-02 01:26:25
【问题描述】：

我有这个问题，我需要在一个圆圈中添加 box-shadow，但似乎不可能。

为什么它不起作用，或者我如何向 SVG 路径中的 </circle> 元素添加圆形阴影以具有当前规格的发光效果？

/*
circle {
  fill: red; <-- works
  box-shadow: 0 0 50px red; <-- does not work
}
*/

<svg width="450" height="450">
   <path id="motionPath"
  	d="M 50 200 L 400 200 "
	stroke="black" fill="transparent" />
	<circle class="circle" r=5 fill=#45b6fe z-index=55>
             <animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
      </svg>

【问题讨论】：

标签： html css

【解决方案1】：

要添加框阴影，您需要处理 feGaussianBlur 属性。下面是给你的代码，它会生成漂亮的盒子阴影。您可以检查输出是否相同

注意：为了正确看到阴影，我增加了圆形的尺寸。您可以根据自己的要求保留。

<svg width="450" height="450">

<defs>
    <filter id="f1" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8"/> 
      <feOffset dx="5" dy="5" result="offsetblur"/> 
      <feOffset dx="-5" dy="-5" result="offsetblur"/>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
   <path id="motionPath"
  	d="M 50 200 L 400 200 "
	stroke="black" fill="transparent" />
  
	<circle class="circle" r=10 fill=#45b6fe z-index=55 style="filter: url(#f1);">
  
             <animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
         
      </svg>

更新： 根据您的要求，我已将所需的背景颜色添加到框阴影中。

<svg width="450" height="450">

    <defs>
        <filter id="f1" x="-40%" y="-30%" width="180%" height="180%" filterUnits="userSpaceOnUse" >
        <feColorMatrix result="offsetblur" in="offOut" type="matrix"/>
          <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> 
         <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"/>
<feOffset in="blur" dx="5" dy="5" result="offsetBlur" stdDeviation="1.7"/>
<feFlood flood-color="red" flood-opacity="5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
          <feMerge> 
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
       <path id="motionPath"
      	d="M 50 200 L 400 200 "
    	stroke="black" fill="transparent" />
      
    	<circle class="circle"  r=10 fill=white  z-index=55 style="filter: url(#f1);">
      
                 <animateMotion dur="8s" repeatCount="indefinite" rotate="auto">
                     <mpath href="#motionPath" />
                 </animateMotion>
             </circle>
             
          </svg>

【讨论】：

你好。谢谢你的帮助。代码功能，但我最需要的盒子阴影效果比现在更大，并带有彩色版本。在这个例子中，大多数情况下需要发光：jsfiddle.net/developingm/v5rk0j49/5

【解决方案2】：

所以我在我的一个网站中有这个，它对我来说很好用

.booking-view-tariff-circle > img {
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 2px 2px 4px #000;
display: block;
height: 80px;
width: 80px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
position: relative;
left: -45px;
top: -78px;
box-shadow: 0 8px 8px rgba(0,0,0,0.54);

【讨论】：

这会将阴影应用到 img 框，而不是 svg 元素。