Question

我遇到了这个问题，我需要在其中将盒子阴影添加到圆上，但是似乎不可能。

为什么它不起作用，或者如何在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>

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

Answer 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);

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

2 个答案: