javascript - 有没有办法使用 SVG 渐变作为置换贴图的输入？

Question

我正在尝试生成一个渐变，我可以将其用作 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>

我希望能够使用生成的渐变扭曲文本，同时保持文本隐藏。非常感谢您的时间和帮助:)。

Answer 1

为了使其正常工作，您需要使用 feImage 的数据 URI。我正在使用你的渐变，但你使用的过滤器有一个小规模的方法。我正在使用 scale="15"

<svg width="300" height="300">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="300">
      <feImage xlink:href="data:image/svg+xml;utf8,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E %3CradialGradient id='rg' r='.7'%3E %3Cstop offset='0%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='10%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='20%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='30%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='40%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='50%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='60%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='70%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='90%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%23f00'%3E%3C/stop%3E% %3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23rg)' width='300' height='300'%3E%3C/rect%3E%3C/svg%3E" result="pict2"/>
      <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic"/>
   </filter> 
</defs>
  
   <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="300" width="300" filter="url(#f)" />
</svg>

此外，您的代码中还有几个错误: 1. viewBox 属性不能带单位。这是不行的: viewBox="0,0,200vw,200vh" 2.您也不能这样做: 或这样: 但是您可以为文本指定字体 -尺寸。