Reputation: 303

Why is my SVG not looking like a ripple (regarding the feDisplacementMap filter)

I am trying to make a ripple filter:

<radialGradient id="g" cx=".6" cy=".6" r=".05" spreadMethod="reflect">
  <stop offset="0" stop-color="#000"></stop>
  <stop offset="1" stop-color="#fff"></stop>
</radialGradient>

This works perfectly in that it makes many circles. But when I sum these two filters, I only get the filter (#f) effect; why does my radialGradient (#g) effect get lost? (See full code below.)

I am expecting it to look like the following:

It should look like this

Reference:

<svg width="340" height="231">
    <defs>
      <filter id="f" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1.1"
        height="1.1">
        <feImage result="pict1" xlink:href="#m1" x="0" y="0" width="1.1" height="1.1"></feImage>
        <feImage result="pict2" xlink:href="#m2" x="0" y="0" width="1.1" height="1.1"></feImage>
        <feDisplacementMap id="fdm" scale=".1" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="pict1">
        </feDisplacementMap>
      </filter>
      <radialGradient id="g" cx=".6" cy=".6" r=".05" spreadMethod="reflect">
        <stop offset="0" stop-color="#000"></stop>
        <stop offset="1" stop-color="#fff"></stop>
      </radialGradient>
      <rect id="m2" x="-10" y="0" width="410" height="300" fill="url(#g)"></rect>
      <image id="m1" x="0" y="0" width="400" height="300"
        xlink:href="http://www.oxxostudio.tw/img/articles/201410/20141009_1_demo3.JPG"></image>
    </defs>
    <rect x="0" y="0" width="400" height="300" filter="url(#f)" transform="translate(-60 -60)"></rect>
  </svg>

==================2020 03 17=====================

thx to respond my ask

make me find the point

============================

For the feImage you need to use an external svg or, as I did, a data:uri. If you want to use data:uri you can use this svg-encoder

now it's work perfect

Reference:

https://codepen.io/enxaneta/post/svg-waves-with-fedisplacementmap

    const filterFeImage = document.querySelector("#f feImage");
    const xlink = "http://www.w3.org/1999/xlink";
    let div = document.getElementById('div');
    let svg = document.getElementById('svg');
    let width = div.offsetWidth;
    let height = div.offsetHeight;
    svg.innerHTML = '<g id="svgandg" filter="url(#f)"><image id="Darwin" xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="http://www.oxxostudio.tw/img/articles/201410/20141009_1_demo3.JPG" width="' + width + '" height="'+ height +'"></image><text id="text" text-anchor="middle" x="' + (width / 2) +'" y="' + (height / 2) +'" style="font-size:180px;font-weight:900;"> How Are You </text></g>';

    let displacement = 0;
    let speed = 0.2;

    function setXlinkHref() {
      /*
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="300" height="300">
      <defs>
        <radialGradient id="rg" r=".9"> 
      */
      let xlinkHref =
        "data:image/svg+xml;utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='" + width + "' height='" + height + "'%3E%3Cdefs%3E%3CradialGradient id='rg' r='.9'%3E";
      /*
          <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='#f00'></stop> 
          <stop offset='100%' stop-color='#f00'></stop>
    */
      for (var i = 0; i < 11; i++) {

        // offset='${(i - 2) * 20 + displacement * 2}%25'  可以控制每一個波的波長
        xlinkHref += `%3Cstop 
                offset='${(i - 2) * 20 + displacement * 2}%25' 
                stop%2Dcolor='%23${i % 2 == 0 ? "f00" : "000"}'%3E%3C/stop%3E`;
      }

      /*
    </radialGradient> 
    <rect id="witness" width="300" height="300" fill="url(#rg)"></rect>*/

      xlinkHref +=
        "%3C/radialGradient%3E%3C/defs%3E%3Crect id='witness' width='"+ width +"' height='" + height + "' fill='url(%23rg)'%3E%3C/rect%3E%3C/svg%3E";

      return xlinkHref;
    }

    function AnimateOffset() {
      let xlinkHref = setXlinkHref();
      filterFeImage.setAttributeNS(xlink, "href", xlinkHref);
      // ripples.setAttributeNS(xlink, "href", xlinkHref);

      if (displacement <= 20) {
        displacement += speed;
      } else {
        displacement = 0;
      }

      // window.requestAnimationFrame(AnimateOffset);
    }

    // 設定楨數的地方
    setInterval(() => {
      AnimateOffset();
    }, 66);
    // window.requestAnimationFrame(AnimateOffset);

    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .div{
      width: 100%;
      height: 100vh;
      background: url("20180319090858589.jpg");
    }
    .div svg{
      width: 100%;
      height: 100%;
    }

  <svg>
    <defs>
      <filter id="f" primitiveUnits="objectBoundingBox">
        <feImage result="pict2" xlink:href=""></feImage>
        <feDisplacementMap scale=".05" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic">
          <!-- 需要重複漣漪所以需要改能用透明度去互相覆蓋 -->
        </feDisplacementMap>
      </filter>
    </defs>
  </svg>
  
    <div class="div" id="div">

    <svg id="svg">
      <!-- <g id="svgandg" filter="url(#f)">
        <image id="Darwin" xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg">
        </image>
        <text id="text" x="0" y="150" style="font-size:50px;font-weight:900;"> How Are You </text>
      </g> -->
    </svg>
  </div>

Upvotes: 2

Why is my SVG not looking like a ripple (regarding the feDisplacementMap filter)

For the feImage you need to use an external svg or, as I did, a data:uri. If you want to use data:uri you can use this svg-encoder

Answers (1)

Related Questions