Блог

У меня есть следующий SVG для рендеринга шашек на доске, где и доска, и шашки имеют приятный скошенный эффект. Я очень доволен эффектом в Chrome (и Safari), но Firefox, похоже, игнорирует этот эффект.

Был бы признателен за помощь в понимании того, почему он не работает, поскольку все примитивы отображаются как поддерживаемые в Firefox (caniuse.com ).

 <svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <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="composite1" />
    <feComposite in="SourceGraphic" in2="composite1" operator="arithmetic" k1="0" k2="1" k3="1" />
  </filter>

  <rect width="400" height="200" fill="#ffffff" />
  <rect x="50" y="10" width="300" rx="10" ry="10" height="180" fill="#666666" 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="#3333ff" />
</svg>
 

Codepen: https://codepen.io/jugglingcats/pen/RwWLQjJ

Большое спасибо

Firefox не игнорирует эффект, он просто очень слабый. Если вы увеличите масштаб поверхности и приблизите точечный источник света к поверхности рисования, вы сможете видеть его более четко.

В кроссбраузерных реализациях lightsource есть много несоответствий — например, FireFox по умолчанию использует цветовое пространство sRGB для lightsources, поэтому вы должны настроить Chrome на его явное использование. Затем вам нужно что-то изменить, пока у вас не будет того, что выглядит одинаково. Например, specularConstant, похоже, не выполняет одно и то же в каждом браузере с 0.3, но установка его на «1» кажется последовательной. Вот фильтр, который выглядит в основном так же. Мне пришлось отключить fePointLight для feDistantLight, чтобы избежать несоответствий в вычислении местоположения.

  <filter id="counter2" color-interpolation-filters="sRGB">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
    <feSpecularLighting in="blur" surfaceScale="10" specularConstant="1" specularExponent="10" result="lightingOut" lightingColor="white">
      <feDistantLight azimuth="225" elevation="0" />
    </feSpecularLighting>
    <feComposite in="lightingOut" in2="SourceAlpha" operator="in" result="composite1" />
    <feComposite in="SourceGraphic" in2="composite1" operator="arithmetic" k1="0" k2="1" k3="1" />
  </filter>