Css Schatten Anwendung auf Svg-Box

Question

Ich habe eine Form, die ich vom Illustrator zu SVG exportiert. Es gibt keinen Hintergrund. Wenn dies ein PNG wäre, könnte ich einen Schatten setzen und es würde bei der Form beginnen, aber wenn ich einen Schatten auf das SVG setze, trifft es nicht auf die Form zu, die es auf die unsichtbare Box anwendet.

ist hier beispielsweise zu zeigen, was ich meine:

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" />

Wie kann ich den Schatten gelten nur die Form?

Answer 1

Der richtige Weg svg Schatten zu verwenden:

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

Update! Animierte 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>