it-swarm.com.de

So wenden Sie einen Schattenfilter über CSS auf SVG-spezifische Elemente/Pfade an

Ich möchte einen Schattenfilter auf ein bestimmtes Element/einen bestimmten Pfad innerhalb einer Inline-SVG über CSS anwenden. Ich nicht muss die gesamte Grafik spiegeln, nur ein Element darin.

.shadow {
  fill: red;
  
  -webkit-filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}
  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

Wie Sie oben sehen können, versuche ich, einen Schlagschatten auf das rote Kreiselement der SVG anzuwenden, aber es funktioniert nicht.

Beim Suchen habe ich keine spezifischen Informationen dazu gefunden, nur wenige Kommentare in anderen SVG-bezogenen Fragen, die lediglich besagen, dass es nicht für einzelne SVG-Elemente funktioniert, jedoch ohne viele Erklärungen.

UPDATE

Wie in den Kommentaren von @ azeós ausgeführt, wird das Rendern mit Firefox (Version 43.0.2) korrekt ausgeführt, sodass es sich um ein Chrome-spezifisches Problem handelt. Gibt es überhaupt einen Crossbrowser, ohne mit dem SVG-Code herumzufummeln, wie in den Kommentaren vorgeschlagen?

8
Gruber

Sie können einen Schatten selektiv anwenden, indem Sie eine Farbauswahl für das Objekt vornehmen, das Sie spiegeln möchten. Erstellen Sie einen Schatten und fügen Sie ihn dann unter der Originalgrafik zusammen. Sie müssen es aber über den SVG-Filter Trapdoor in CSS-Filtern tun - was im IE nicht funktioniert. (So ​​... hackig, aber möglich)

Spec ist hier: w3.org/TR/SVG11/filters.html#feColorMatrixElement

Demo-Spielzeug ist da:
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

Diese Matrix verdoppelt die Deckkraft aller roten Werte, setzt die Deckkraft aller anderen Objekte auf Null und subtrahiert dann 1. Der Effekt besteht darin, nur Dinge auf 100% Deckkraft zu belassen, die rgb sind (255,0,0)

#mySVG {
   filter: url(#selective-shadow);
}

.shadow {
  fill: red;
}
<svg>
 <defs>
   <filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0 
                                          0 0 0 0 0
                                          0 0 0 0 0 
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="2" dx="2"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
   </filter>
 </defs>
</svg>



<svg height="150" width="150" id="mySVG">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>
2
Michael Mullany

Aktualisiert 2018-03: Ich habe einige Experimente zu diesem Thema durchgeführt, da ich auch keine Informationen dazu finden konnte und die Ergebnisse ziemlich inkonsistent sind. Die TL; DR-Version, wenn Sie werden eine Polyfill verwenden oder einfach den Dropshadow innerhalb der SVG verwenden.

Codepen-Experiment: http://codepen.io/staypuftman/pen/GoNoMq

Chrome 65 + Canary 67:

Weder Chrome noch Edge Canary respektieren filter oder -webkit-filter ordnungsgemäß im Kontext eines SVG-Objekt-Drop-Shadows, arbeiten jedoch an einer einfachen div.

enter image description here

Firefox 58/Quantum + Firefox 53:

Sieht sowohl für SVG- als auch für HTML-Objekte ziemlich gut aus.

enter image description here

Safari 10.1 und höher

Safari hat dieses Problem in der 10.1 (und möglicherweise der 10.0) -Serie behoben.

enter image description here

Safari 9.x

SVG CSS dropshadow wird nicht angezeigt, und die div dropshadow hat aus irgendeinem Grund weniger Deckkraft

enter image description here

IE11

Nichts.

enter image description here

14
staypuftman

In this CodePen habe ich verschiedene drop-shadows zu path und text hinzugefügt, die dynamisch generiert wurden. Hier Ich habe eine Cross-Browser-Lösung gefunden, die Sie beispielsweise auf eine class anwenden können, anstelle von #robbie img (im zweiten Link):

#robbie img { filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";   filter: url(#drop-shadow);   -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));   filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); }

Im first CodePen habe ich einen anderen alternativen Weg kommentiert, der nicht die classes verwendet, sondern #numbers_dropshadows_filter und #strokes_dropshadows_filter in <defs></defs> definiert.

Prost

1
Riccardo Volpe