it-swarm.com.de

Wie verringert man die Deckkraft der Alpha-Ebene in einem SVG-Filter?

Ich versuche ein Logo als SVG zu erstellen. Ich habe die Datei aus Illustrator exportiert. Das Logo ist mit einem Schlagschatten versehen. Ich habe das XML durchgesehen und den Filterknoten gefunden

<filter  filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2">
<feGaussianBlur  stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur>
<feOffset  result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset>
<feMerge>
    <feMergeNode  in="offsetBlurredAlpha"></feMergeNode>
    <feMergeNode  in="SourceGraphic"></feMergeNode>
</feMerge>

Gibt es eine Möglichkeit, das Alpha des erzeugten offsetBlurredAlpha zu ändern? Ich möchte nicht, dass es bei reinem Schwarz beginnt. Ich möchte, dass es bei 50% Schwarz beginnt, damit der Schatteneffekt um das Objekt herum hell genug ist.

26
ddilsaver

Eine Möglichkeit besteht darin, ein feComponentTransfer-Filterprimitiv wie folgt hinzuzufügen:

<filter id="dropshadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
  <feOffset dx="2" dy="2"/>
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.2"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>

Ein Live-Beispiel ist zu sehen hier .

44
Erik Dahlström

Eine Möglichkeit ist, einfach opacity: 0.5 zu verwenden. Erstellen Sie dazu einen Filter für only the dropshadow und wenden Sie ihn auf ein <use> -Tag an, das auf die Quellform verweist, anstatt einen Filter zu erstellen, der den Schlagschatten mit der Originalquelle oben verbindet.

Dieser Ansatz bietet noch weitere Vorteile. Beispielsweise können Sie jetzt nur den Schatten separat gestalten.

#arrow-shadow {
        opacity:0.5;
}
g:hover #arrow-shadow {
        opacity:0.7;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px">
        <defs>
                <filter id="dropshadow" height="130%">
                        <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
                        <feOffset dx="2" dy="2" result="offsetblur" />
                </filter>
        </defs>
        <g fill="#EEE">
                <use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use>
                <polygon id="polygon"
                                points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/>
                
        </g>
</svg>
2
Randy Hudson

Eine alternative Methode zum Festlegen des Alpha-Werts ist die Verwendung des Filterprimitivs feColorMatrix. Hiermit können Sie gleichzeitig den Alpha-Wert und die Farbe eines Schlagschattens einstellen.

Der Filter unten multipliziert den Alpha-Wert mit 0.2 und setzt gleichzeitig die Farbe des Schlagschattens auf rot.

<filter id="dropshadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
  <feOffset dx="2" dy="2"/>
  <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>

Wenn Sie jedoch nur den Alpha-Wert ändern müssen, ist das Filterprimitiv feComponentTransfer wahrscheinlich die bessere Wahl.

0
Waruyama