xml - importar - Cómo reducir la opacidad de la capa alfa en un filtro svg?

illustrator svg to html

Question

Intento crear un logotipo como SVG. Exporté el archivo desde Illustrator. El logo tiene una sombra paralela. Estaba mirando a través del XML y encontré el nodo de filtro

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

¿Hay alguna manera de cambiar el alfa del offsetBlurredAlpha generado? No quiero que comience en negro puro. Quiero que comience con un 50% de negro para que el efecto de sombra sea lo suficientemente ligero alrededor del objeto.

Answer 1

Una forma alternativa de establecer el valor alfa es usar la primitiva de filtro feColorMatrix . Al usar esto, puede establecer el valor alfa y el color de una sombra paralela al mismo tiempo.

El filtro siguiente multiplica el valor alfa por 0.2 y al mismo tiempo establece el color de la sombra paralela en rojo.

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

Pero si solo necesita cambiar el valor alfa, la primitiva de filtro feComponentTransfer es probablemente la mejor opción.

Answer 2

Una forma es agregar una primitiva de filtro feComponentTransfer , como esta:

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

Un ejemplo en vivo se puede ver here .

Answer 3

Una forma es simplemente usar opacity: 0.5 . Para hacer esto, en lugar de crear un filtro que combine la sombra de gotas con la fuente original en la parte superior, cree un filtro solo para la sombra de gotas y aplíquelo a una etiqueta <use> que haga referencia a la forma de la fuente.

Hay otras ventajas para este enfoque. Por ejemplo, ahora puede aplicar un estilo separado a solo la sombra.

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