適用於svg盒子的Css陰影

Question

我從插圖畫出口到SVG的形狀。沒有背景。如果這是一個PNG，我可以設置一個陰影，它將從該形狀開始，但是當我在SVG上設置陰影時，它不適用於應用於不可見框的形狀。

這裏是例子來說明我的意思：

body{ 
 
    background-color: #000; 
 
} 
 

 
.oval{ 
 
    width: 500px; 
 
    box-shadow: 10px 10px 20px #fff; 
 
} 
 

 
img{ 
 
    margin: 50px; 
 
}

<img class="oval" src="http://gdurl.com/4EiW" alt="oval" />

如何讓我的影子適用於只是形狀？

Answer 1

正確的方法使用SVG陰影：

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <filter id="shadow"> 
 
     <feDropShadow dx="4" dy="8" stdDeviation="4"/> 
 
    </filter> 
 
    </defs> 
 

 
    <ellipse cx="200" cy="80" rx="100" ry="50" 
 
     style="fill:blue; filter:url(#shadow);"/> 
 
</svg>

更新！動畫Svg爲：

body { 
 
    background: #E75B47; 
 
    background-image: -webkit-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%); 
 
    background-image: -moz-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%); 
 
    background-image: -o-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%); 
 
    background-image: linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%); 
 
    text-align: center; 
 
} 
 

 
.bolt { 
 
    fill: hsl(7, 50%, 38%); 
 
    filter: url(#bolt-inner-shadow); 
 
} 
 

 
.bolt.loading { 
 
    -webkit-animation: light-pulse 3s infinite; 
 
    -moz-animation: light-pulse 3s infinite; 
 
    animation: light-pulse 3s infinite; 
 
} 
 

 
@keyframes light-pulse { 
 
    1% { fill: hsl(7, 50%, 38%); } 
 
    50% { fill: hsl(7, 50%, 78%); } 
 
    100% { fill: hsl(7, 50%, 38%); } 
 
} 
 

 
@-webkit-keyframes light-pulse { 
 
    1% { fill: hsl(7, 50%, 38%); } 
 
    50% { fill: hsl(7, 50%, 78%); } 
 
    100% { fill: hsl(7, 50%, 38%); } 
 
} 
 

 
@-webkit-keyframes pulse { 
 
    1% { -webkit-transform: scale(0.7); } 
 
    25% { -webkit-transform: scale(1.1); } 
 
    45% { -webkit-transform: scale(0.9); } 
 
    63% { -webkit-transform: scale(1.05); } 
 
    79% { -webkit-transform: scale(0.95); } 
 
    100% { -webkit-transform: scale(1.0); } 
 
} 
 

 
@keyframes pulse { 
 
    1% { transform: scale(0.7); } 
 
    25% { transform: scale(1.1); } 
 
    45% { transform: scale(0.9); } 
 
    63% { transform: scale(1.05); } 
 
    79% { transform: scale(0.95); } 
 
    100% { transform: scale(1.0); } 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258px" height="437px" viewBox="0 0 258 437" version="1.1"> 
 
    <defs> 
 
    <filter id="bolt-inner-shadow"> 
 
     <feOffset dx="0" dy="0" /> 
 
     <feGaussianBlur 
 
     stdDeviation="8" 
 
     result="offset-blur" 
 
     /> 
 
     <feComposite 
 
     operator='out' 
 
     in='SourceGraphic' 
 
     in2='offset-blur' 
 
     result='inverse' 
 
     /> 
 
     <feFlood 
 
     flood-color='6B2C22' 
 
     flood-opacity='1' 
 
     result='color' 
 
     /> 
 
    
 
     <!-- Clip color inside shadow --> 
 
     <feComposite 
 
     operator='in' 
 
     in='color' 
 
     in2='inverse' 
 
     result='shadow' 
 
     /> 
 
    
 
     <!-- Put shadow over original object --> 
 
     <feComposite 
 
     operator='over' 
 
     in='shadow' 
 
     in2='SourceGraphic' 
 
     /> 
 
    </filter> 
 
    </defs> 
 
    <path d="M12 240.2 L221.733736 6 L165.795158 192.5 L245.547254 191.8 L35.813518 426 L91.7520965 239.5 Z M12 240.2" class="bolt loading"> 
 
</svg>