我正在尝试使以下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。
非常感谢任何帮助!
<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>