SVG <feDisplacementMap>не рендеринг в PNG, рендеринг только в Chrome после увеличения / уменьшения - PullRequest
Новая
       56

SVG <feDisplacementMap>не рендеринг в PNG, рендеринг только в Chrome после увеличения / уменьшения

0 голосов
/ 12 июня 2019

Я пытаюсь создать относительно простой фон для изображения SVG. Я создал эквивалент в GIMP, применив радиальный градиент от центра к краю, а затем применив фильтр «распространения».

Version created in GIMP.

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="wallpaper"
  viewBox="0 0 1920 1080" height="1080" width="1920"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
>
  <defs>
    <radialGradient id="gradient">
      <stop offset="2.5%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#000000"/>
    </radialGradient>

    <clipPath id="gradientClip" clipPathUnits="userSpaceOnUse">
      <rect
        id="gradientClip-rect" y="0" x="0" height="1080" width="1920"
      />
    </clipPath>
  </defs>


  <g id="background" clip-path="url(#gradientClip)">
    <rect
      id="background-fill" width="1920" height="1080" x="0" y="0"
      style="fill:#000000;"
    />

    <filter id="gradientNoise">
      <feTurbulence type="fractalNoise" baseFrequency="50" numOctaves="2" result="turbulence"/>
      <feDisplacementMap
        in2="turbulence" in="SourceGraphic" scale="540"
        xChannelSelector="R" yChannelSelector="G"
      />
    </filter>

    <circle
      id="background-gradient" filter="url(#gradientNoise)" fill="url(#gradient)"
      cx="960" cy="540" r="960"
    />
  </g>
</svg>

Однако, когда я растерирую его в PNG или открываю в Chrome (при 100% увеличении), все, что я получаю, это градиент без шума.

enter image description here

Однако снова , если я увеличиваю или уменьшаю масштаб в Chrome, фильтр применяется правильно.

Side-by-side comparison of Chrome rendering the image at 80% and 110%.

Возможно ли, что этот файл имеет какую-то проблему, которая появляется только тогда, когда изображение просматривается в размере, определенном в окне просмотра? Есть ли что-то еще, чего я не вижу?

Я бы отнес свою проблему PNG к той же проблеме Этот плакат имел бы, если бы не странное поведение, которое я замечаю, только когда мой браузер настроен на 100% увеличение.

Спасибо!

...