Mozilla

火狐社区

登录    注册

QQ互联

[综合讨论] fireFox关于svg滤镜的算法也许存在问题?

稻田 社区新人 发表于 2023-10-15 22:55:57 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式 [复制链接] 打印 上一主题 下一主题
0 1200
跳转到指定楼层
  1. <svg
  2.   height="300"
  3.   width="400"
  4.   viewBox="0 0 400 300"
  5.   xmlns="http://www.w3.org/2000/svg">
  6.   <defs>
  7. <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>
  8.         </defs>
  9.   <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>
  10. </svg>
复制代码

这是一个svg文件,在fireFox和chrome浏览器中,渲染效果出现非常大的差别。




左边的是chrome浏览器效果,右边的是fireFox浏览器效果。
很明显,fireFox 不支filter 的primitiveUnits="objectBoundingBox"属性值,始终把灯源的坐标远点定位在左上角。而chrome浏览器,无论你的图形在哪里,它都会准确的照射指定的坐标位置。我的项目,滤镜涉及全球共享,需要primitiveUnits为objectBoundingBox。
属性primitiveUnits="objectBoundingBox"是ec6的标准,fireFox 的算法也许有问题
如果不支持primitiveUnits="objectBoundingBox",复用滤镜问题就大了,一个图形往往涉及多个灯源。如果这样,不能做到多个反射灯的应用在同一个图形上,裸体人涉及大量的渐变阴影,需要射灯的照射来实现。
chrome浏览器的基本没有问题,移动设备还存在茫光消失的问题。
fireFox 还存其他一些问题,不知道fireFox想不想解决关于滤镜应用涉及的全部问题。我先指出这个问题,如果愿意解决,我将逐渐反映问题。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表