Bewerben Schatten auf ein Dreieck svg

Question

Ich fragte mich, wie ich Schatten auf Svg Bilder anwenden könnte (zum Beispiel ein Dreieck). Ich habe Lösungen wie Polyfill gefunden, aber es hat einfach nicht so funktioniert, wie ich es wollte. Ich habe eine JSFiddle gemacht, um Ihnen zu zeigen, was ich einen Schatten geben möchte.

Mein HTML:

<div class="spikes"></div> 

Meine CSS:

body { 
    background-color: #ccc; 
} 
.spikes { 
    margin-top: 20px; 
    width: 250px; 
    transform: rotate(180deg); 
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K"); 
    height: 20px; 
    position: absolute; 
    max-width: 1000px; 
    transition: 0.75s; 
    -webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
    -moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
    box-shadow: -2px -2px 5px 0px rgba(97,97,97,1); 
} 

Answer 1

Sie können keinen Schatten auf einen background-image gelten, da es eine CSS-Eigenschaft ist und kein Element.

Was Sie können tun ist, eine filter:drop-shadow zum statt Element anzuwenden.

Vorausgesetzt, dass die SVG hat Transparenz/Alpha es so etwas wie folgt aussehen:

body { 
 
    background-color: #ccc; 
 
} 
 
.spikes { 
 
    margin-top: 20px; 
 
    width: 250px; 
 
    transform: rotate(180deg); 
 
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K"); 
 
    height: 20px; 
 
    position: absolute; 
 
    max-width: 1000px; 
 
    transition: 0.75s; 
 
    filter: drop-shadow(-1px -1px 1px black); 
 
}

<div class="spikes"></div>