SVG过滤器和填充在所有浏览器中均不起作用，在Safari中严重损坏

Question

我正在尝试使以下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）：

在Firefox中效果不错，但斜角不那么明显：

在Safari中，董事会和检查器根本不会出现！

这里是码盘：https://codepen.io/jugglingcats/pen/GRpWobK。

非常感谢任何帮助！

Answer 1

 <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>