Я пытаюсь сгенерировать градиент, который я мог бы использовать в качестве входных данных для фильтра feDisplacementMap
для искажения текста в SVG. Как мне это реализовать?
Я пытался создать его, как часть SVG и скрыть градиент, но не могу заставить его работать таким образом.
<svg
filter="url(#f)"
overflow="auto"
viewBox="0,0,200vw,200vh"
width="100%"
height="100vh"
>
<defs>
<radialGradient id="rg" r=".9">
<stop offset="0%" stop-color="#f00"></stop>
<stop offset="10%" stop-color="#000"></stop>
<stop offset="20%" stop-color="#f00"></stop>
<stop offset="30%" stop-color="#000"></stop>
<stop offset="40%" stop-color="#f00"></stop>
<stop offset="50%" stop-color="#000"></stop>
<stop offset="60%" stop-color="#f00"></stop>
<stop offset="70%" stop-color="#000"></stop>
<stop offset="80%" stop-color="#f00"></stop>
<stop offset="90%" stop-color="#000"></stop>
<stop offset="100%" stop-color="#f00"></stop>
</radialGradient>
<filter id="f" primitiveUnits="objectBoundingBox">
<feImage result="pict2" xlink:href="#witness"></feImage>
<feDisplacementMap
scale=".05"
xChannelSelector="R"
yChannelSelector="R"
in2="pict2"
in="SourceGraphic"
></feDisplacementMap>
</filter>
<pattern id="imageFill" width="1" height="1" viewBox="0 0 300 300">
<image id="ripples" width="300" height="300" xlink:href="" />
</pattern>
</defs>
<text height="100vh" text-anchor="middle" class="svgText">
<tspan height="100vh" x="50%" y="50%">text</tspan>
</text>
<rect
id="witness"
width="100%"
height="100%"
stroke="none"
opacity="0"
fill="url(#rg)"
/>
</svg>
Я хотел бы иметь возможность искажать текст сгенерированным градиентом, сохраняя его скрытым.
Свободный перевод вопроса Is there a way to use a SVG gradient as input to a displacement map? от участника @rui.