Я пытаюсь применить пользовательскую карту смещения к тексту, используя SVG-фильтр.
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feImage xlink:href="https://placekitten.com/500/500" x="9" y="51" width="500" height="500" preserveAspectRatio="xMidYMid meet" crossOrigin="use-credentials" result="image"/>
<feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="image" result="colormatrix2"/>
<feDisplacementMap in="SourceGraphic" in2="colormatrix2" scale="385" xChannelSelector="R" yChannelSelector="R" x="20" y="90" width="500" height="500" result="displacementMap"/>
</filter>
Фильтр работает, только если я установил in="image" in2="SourceGraphic", в результате чего изображение, связанное с <feImage>, должно бытьискажен графикой, к которой применяется фильтр.Если я обменяю два «ins» так, чтобы они работали так, как должно, ничего не происходит.Исходная графика отображается без каких-либо смещений.Это происходит также, когда я пытаюсь создать фильтр с помощью инструмента https://yoksel.github.io/svg-filters/#/.
Кто-нибудь знает, почему это происходит и как я могу сделать это правильно?