Как создать прозрачный градиент маски с использованием фильтра SVG

183

20 апреля 2017, 14:35

В настоящее время я использую градиент SVG, чтобы применить эффект fade-out для патчей.
Это позволяет начать путь с непрозрачностью 100% в точке x0 и постепенно уменьшать непрозрачность до 0% в точке x1, где бы они не находились для конкретного пути, к которому применяется градиент:

<linearGradient id="gradient_to_transparent" x1="0%" x2="100%">
    <stop offset="0" stop-opacity="1"></stop>
    <stop offset="1" stop-opacity="0"></stop>
</linearGradient>

Это прекрасно работает при применении к стилю обводки контура:

<path d="..." style="stroke:url(#gradient_to_transparent);"></path>

Однако проблема заключается в том, что при использовании данного стиля обводки я не могу применить дополнительно другие стили обводки, и по умолчанию они остаются черными.

Я бы хотел, чтобы стиль обводки был выполнен с использованием любого цвета, который я назначу, а затем применить градиент к непрозрачности обводки или применить фильтр SVG для создания эффекта fade-out.

Я попытался использовать фильтры SVG - feComponentTransfer с feFuncA, но не смог получить то, что сработало бы.

Цвет обводки необходимо отдельно рассчитывать для каждого пути. Таким образом, решение установить цвет в градиенте не будет масштабироваться очень хорошо.

Перевод ответа: How to create a transparency gradient mask using an SVG filter @drarmstr

Answer 1

Должен ли он быть градиентом или фильтром? Я бы предложил использовать <mask>, который содержит прямоугольник с примененным градиентом, но я не уверен правильно ли я понял ваши требования.

<svg id="svg1" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="1280" height="640"  viewBox="-20 20 400 80"> 
 
<defs> 
	<linearGradient id="fadeGrad" y2="1" x2="0"> 
		<stop offset="0.5" stop-color="white" stop-opacity="0"/> 
		<stop offset="1" stop-color="white" stop-opacity=".5"/> 
	</linearGradient> 
	<mask id="fade" maskContentUnits="objectBoundingBox"> 
		<rect width="1" height="1" fill="url(#fadeGrad)"/> 
	</mask> 
</defs> 
 
<g id="web2.0-reflection"> 
	<text id="text" font-size="40" font-weight="bold" fill="yellowgreen" font-family="sans-serif" text-rendering="geometricPrecision">Instant Web 2.0 
</text> 
	<use xlink:href="#text" transform="scale(1 -1)" mask="url(#fade)"/> 
</g> 
</svg>

Смотрите аналогичный пример

Перевод ответа: How to create a transparency gradient mask using an SVG filter @Erik Dahlström

Answer 2

Пример анимации SVG

Код взят из примера ниже.
Добавлены последовательные анимации букв с помощью команд skewX() и skewY() реализующие вращение букв вокруг осей Xи Y соответственно.

<svg id="svg1" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="1280" height="640"  viewBox="-20 20 400 80"> 
	 
	<defs> 
		<linearGradient id="fadeGrad" y2="1" x2="0"> 
			<stop offset="0.5" stop-color="white" stop-opacity="0"/> 
			<stop offset="1" stop-color="white" stop-opacity=".5"/> 
		</linearGradient> 
		<mask id="fade" maskContentUnits="objectBoundingBox"> 
			<rect width="1" height="1" fill="url(#fadeGrad)"/> 
		</mask> 
	</defs> 
	 
	<g id="web2.0-reflection"> 
		<text id="text" font-size="40" font-weight="bold" fill="purple" font-family="sans-serif" text-rendering="geometricPrecision">Instant Web 2.0 
			<animateTransform id="an1" attributeName="transform" type="skewX" values="0;50;0;-50;0" begin="0;an2.end" dur="8s" repeatCount="1"/>  
			<animateTransform id="an2" attributeName="transform" type="skewY" values="0;3;0;-3;0" begin="an1.end" dur="5s" repeatCount="1"/> 
		</text> 
		<use xlink:href="#text" transform="scale(1 -1)" mask="url(#fade)"/> 
	</g> 
</svg>

Код взят из примера ниже. Добавлены последовательные анимации букв с помощью команд skewX() и skewY()