Wie senken Sie die Deckkraft der alpha-Schicht in eine svg-filter?

Ich versuche zu schaffen, ein logo als SVG. Ich exportierte die Datei aus Illustrator. Das logo hat einen Schatten auf Sie. Ich war auf der Suche durch die XML-und ich fand die filter-Knoten

<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, ändern Sie die alpha der offsetBlurredAlpha generiert? Ich will nicht, es zu starten, bei reinen schwarz will ich es starten bei 50% schwarz, so dass die Schatten-Effekt ist genug Licht um das Objekt herum.

InformationsquelleAutor ddilsaver | 2013-02-14
  1. 51

    Eine Möglichkeit ist das hinzufügen einer feComponentTransfer filter primitive, wie diese:

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

    Einem live-Beispiel gesehen werden kann,hier.

    InformationsquelleAutor Erik Dahlström
  2. 5

    Eine Möglichkeit ist, einfach opacity: 0.5. Um dies zu tun, anstatt einen filter verschmilzt, dass der Schlagschatten mit der ursprünglichen Quelle an der Spitze, erstellen Sie einen filter für nur die Schlagschatten, und wenden Sie es auf eine <use> tag, der auf den source-Form.

    Gibt es weitere Vorteile dieses Ansatzes. Zum Beispiel, können Sie jetzt gelten separate styling zu nur die Schatten.

    CSS:

    #arrow-shadow {
	opacity:0.5;
}
g:hover #arrow-shadow {
	opacity:0.7;
}

    HTML:

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

    InformationsquelleAutor Randy Hudson
  3. 1

    Eine alternative Art der Einstellung der alpha-Wert ist mit der feColorMatrix filter primitive. Mit diesem können Sie festlegen, alpha-Wert und die Farbe der Schlagschatten an der gleichen Zeit.

    Den filter unten multipliziert den alpha-Wert durch 0.2 und zur gleichen Zeit wird die Farbe der Schlagschatten-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>

    Aber wenn Sie nur brauchen, ändern Sie den alpha-Wert, der feComponentTransfer filter primitive ist vermutlich die bessere Wahl.

    InformationsquelleAutor Waruyama
Schreibe einen Kommentar