获得社区支持

修订信息
  • 修订编号: 267151
  • 建立于
  • 创建者: bgtxy
  • 备注: svg 问题
  • 已审阅:
  • 可进行本地化:
修订原文
修订内容

我有一个svg文件,在fireFox和chrome浏览器中,渲染效果出现非常大的差别。svg 代码如下:

<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"><animate id="f_29_223_1" attributeName="height" dur="5" repeatCount="indefinite" additive="replace" fill="remove" begin="rect_5_80_1.click" end="rect_5_80_1.click" values="10%;100%" restart="always" calcMode="linear"></animate><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"><animate id="feSpecularLighting_29_223_1_p_1" attributeName="x" dur="0s" repeatCount="indefinite" additive="sum" fill="remove" begin="0s" end="indefinite" values="" restart="always" calcMode="linear"></animate></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)" ></rect> </svg>

在chrome中,渲染:

图像“chrome 浏览器渲染效果”不存在。

在chrome浏览器中,feSpotLight 完全执行了primitiveUnits="objectBoundingBox";

在fireFox中的渲染效果

图像“fireFox渲染效果”不存在。

很明显,fireFox 浏览器中,feSpotLight没有执行primitiveUnits="objectBoundingBox";经多次其他测试,也证明了这一点。

昨天完善,我在开发者社区发了这个贴子,系统显示正在审查。现在这个帖子没有了,不知是怎么一回事。

fireFox 在svg滤镜方面,还存在更多的算法和策略问题。发此贴,想知道fireFox的开发者们是否要响应,以便提供更多的测试发现的问题。