it-swarm.com.ru

Как снизить непрозрачность альфа-слоя в SVG-фильтре?

Я пытаюсь создать логотип как SVG. Я экспортировал файл из Illustrator. На логотипе есть тень. Я просматривал XML и нашел узел фильтра

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

Есть ли способ изменить альфа сгенерированного offsetBlurredAlpha? Я не хочу, чтобы он начинался с чистого черного, я хочу, чтобы он начинался с 50% черного, чтобы эффект тени был достаточно светлым вокруг объекта. 

26
ddilsaver

Одним из способов является добавление примитива фильтра feComponentTransfer, например так:

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

Живой пример можно увидеть здесь .

44
Erik Dahlström

Один из способов - просто использовать opacity: 0.5. Для этого вместо создания фильтра, который объединяет дропшоу с исходным источником сверху, создайте фильтр для только дропшоу и примените его к тегу <use>, который ссылается на исходную форму.

У этого подхода есть и другие преимущества. Например, теперь вы можете применить отдельный стиль только к тени.

#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

Альтернативный способ установки альфа-значения заключается в использовании примитива фильтра feColorMatrix. Используя это, вы можете установить альфа-значение и цвет тени одновременно.

Фильтр ниже умножает альфа-значение на 0.2 и в то же время устанавливает цвет тени на красный.

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

Но если вам нужно только изменить альфа-значение, примитив фильтра feComponentTransfer, вероятно, является лучшим выбором.

0
Waruyama