本帖最后由 稻田 于 2023-10-16 10:37 编辑
我有一个svg文件,在fireFox和chrome浏览器中,渲染效果出现非常大的差别。[code]<svg
height="300"
width="400"
viewBox="0 0 400 300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f_29_223" x="0" y="0" width="1" height="1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<feSpecularLighting id="feSpecularLighting_29_223_1" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="feSpecularLighting_29_223_1" surfaceScale="5" specularConstant="2" specularExponent="2" lighting-color="#FF0000">
<feSpotLight id="feSpecularLighting_29_223_1_p" x=".5" y=".2" z=".001" pointsAtX=".5" pointsAtY=".25" pointsAtZ="0.001" specularExponent="20" limitingConeAngle="34"></feSpotLight>
</feSpecularLighting>
<feComposite id="feComposite_29_223_1" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="feSpecularLighting_29_223_1" operator="out" result="feComposite_29_223_1"></feComposite>
</filter>
</defs>
<rect id="rect_7_162_2" x="20" y="75" rx="0" ry="0" width="200" height="150" stroke="#000" stroke-width="1" stroke-dasharray="none" fill-opacity="1" fill="#000000" stroke-opacity="1" filter="url(#f_29_223)" mask="none" clip-path="none" class="rect2" transform="skewX(0) skewY(0) translate(0 0) scale(1 1) rotate(0 0 0)" style="visibility: visible;"></rect>
</svg>
在chrome浏览器中渲染效果:
chrome渲染效果
光源 feSpotLight 执行了primitiveUnits="objectBoundingBox";
fireFox 渲染效果
光源 feSpotLight 没有执行primitiveUnits="objectBoundingBox"。
fireFox,在svg滤镜方面还存在更多的问题。发此贴,想知道fireFox的开发者们是否响应帖子,以便我反馈更多的问题。
我找不到向开发者们的反馈问题的渠道。
|
|