SVG-фильтр и заливка работают не во всех браузерах, плохо работают в Safari - PullRequest
Новая
       35

SVG-фильтр и заливка работают не во всех браузерах, плохо работают в Safari

1 голос
/ 24 апреля 2020

Я пытаюсь заставить работать следующий SVG во всех основных браузерах: 

   <svg width="800" height="600">
      <defs>
        <pattern id="leather" patternUnits="userSpaceOnUse" width="225" height="150">
          <image href="http://www.backgammonhub.com/static/media/leather.2ed72b72.jpg" width="225" height="150"/>
        </pattern>
      </defs>

      <filter id="board">
        <feTurbulence type="turbulence" baseFrequency="0.6 0.6" result="t"/>
        <feComposite operator="in" in="t" in2="SourceGraphic"/>
      </filter>
      <filter id="counter" filterUnits="objectBoundingBox">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
        <feSpecularLighting in="blur" surfaceScale="6" specularConstant="0.5" specularExponent="10" result="specOut" lightingColor="white">
          <fePointLight x="-2000" y="-2000" z="2000"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="sourceAlpha" operator="in" result="specOut2"/>
        <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" result="litPaint"/>
      </filter>

      <rect width="400" height="200" fill="grey"/>
      <rect x="50" y="10" width="300" rx="10" ry="10" height="180" fill="url(#leather)" filter="url(#counter)"/>
      <circle cx="120" cy="100" r="20" filter="url(#counter)"/>
      <circle cx="250" cy="100" r="20" filter="url(#counter)" fill="#dddddd"/>
    </svg>

Вот результат, которого я пытаюсь достичь (Chrome):

enter image description here

В Firefox это довольно хорошо, но скосы не такие четкие:

enter image description here

В Safari доска и шашки вообще не отображаются !

enter image description here

Вот кодовая ручка: https://codepen.io/jugglingcats/pen/GRpWobK.

Любая помощь очень ценится!

1 Ответ

1 голос
/ 24 апреля 2020

Похоже, что проблема была с опечаткой в ​​'sourceAlpha' на первом feComposite.

Вот исправленная версия: 

 <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <pattern id="leather" patternUnits="userSpaceOnUse" width="225" height="150">
          <image href="http://www.backgammonhub.com/static/media/leather.2ed72b72.jpg" width="225" height="150"/>
        </pattern>
      </defs>

      <filter id="counter" filterUnits="objectBoundingBox">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
        <feSpecularLighting in="blur" surfaceScale="2" specularConstant="0.3" specularExponent="10" result="lightingOut" lightingColor="white">
          <fePointLight x="-2000" y="-2000" z="500"/>
        </feSpecularLighting>
        <feComposite in="lightingOut" in2="SourceAlpha" operator="in" result="specOut2"/>
        <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1"/>
      </filter>

      <rect width="400" height="200" fill="grey"/>
      <rect x="50" y="10" width="300" rx="10" ry="10" height="180" fill="url(#leather)" filter="url(#counter)"/>
      <circle cx="120" cy="100" r="20" filter="url(#counter)" fill="black"/>
      <circle cx="250" cy="100" r="20" filter="url(#counter)" fill="#eeeeee"/>
    </svg>
...