Styling (Unschärfe) ein SVG mit Klasse via CSS

Ich versuche, einige Pfad/SVG-Elemente mit CSS zu stylen. Insbesondere versuche ich, eine Unschärfe auf ihre Grenzen anzuwenden. Da die Elemente aus einer Bibliothek erstellt werden (leaflet.clustermarkers) kann ich die Erstellung der SVG/Path-Elemente selbst nicht steuern. Die Bibliothek bietet den Elementen eine "Klasse" an, mit der ich sie über CSS auswählen kann.Styling (Unschärfe) ein SVG mit Klasse via CSS

So sind die folgenden Werke:

.poligonArea{ 

    fill:black; 

}

aber die folgenden funktioniert nur in Firefox, aber weder in Chrome noch in Safari:

.poligonArea{ 

    fill:black; 
    filter: blur(5px); 
    -webkit-filter: blur(10px); 
}

Warum es funktioniert nicht in Chome/Safari? Sie sollten die SVG-Filter unterstützen, nicht?

Quelle

2017-04-18 lqlwle

https://developer.mozilla.org/en-US/docs/Web/CSS/filter <- Vor allem der Teil auf SVG-Filter. – Roberrrt

Also heißt das, dass im Grunde nur Firefox und Edge Filter unterstützen: Unschärfe auf SVG-Elementen ?! (Sieht aus wie unter "Browser-Kompatibilität" in Ihrem Link) Gibt es eine andere Möglichkeit, eine Unschärfe oder zumindest eine unscharfe Grenze in meinem Fall anzuwenden? – lqlwle

Unfixed sollte immer nach Präfix in CSS kommen. Wenn das nicht das Problem ist, dann ist die Unterstützung von Elementenebenen für CSS-Filter in SVG noch nicht abgeschlossen und wenn es nicht funktioniert, müssen Sie einen SVG-Filter direkt verwenden. Google SVG Filter, wenn Sie wissen müssen, wie sie funktionieren - es gibt viele Dokumente. –

Also habe ich folgendes, die

Ich habe dieses svg-Tag mit dem angegebenen Filter (in meinem Fall möchte ich die Gaussian Blur) auf die index.html/DOM

<svg> 
<defs> 
    <filter id="mySVGfilter" x="-50%" y="-50%" width="200%" height="200%"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> 
    </filter> 
</defs>

scheint funktionieren

(width = "200%" height = "200%" sorgt dafür, dass meine Unschärfe muß nicht von den Elementgrenzen abgeschnitten werden)

dann in der CSS-Datei, die ich diese hinzugefügt:

.poligonArea{ 

    fill:black; 
    filter: url('#mySVGfilter'); 
}

Quelle

2017-04-18 15:59:40 lqlwle

Styling (Unschärfe) ein SVG mit Klasse via CSS

Antwort

Verwandte Themen