firefox - Firefox 中的 SVG 线性渐变未显示
问题描述
我有以下代码示例linearGradient
,它使用 SVGrect
并feImage
显示线性渐变。渐变在 Chrome 中正确显示,但在 Firefox 中不正确。
可能是什么问题,我该如何纠正?
<svg width="350" height="350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- INSTAGRAM ADEN FILTER -->
<linearGradient id="gradient_aden">
<stop offset="0%" stop-color="#420A18" stop-opacity="100%" />
<stop offset="100%" stop-color="#420A18" stop-opacity="0%" />
</linearGradient>
<!-- screen on filtered image -->
<rect id="adensc" x="0" y="0" width="100%" height="100%" fill-opacity=".5" fill="url(#gradient_aden)" />
<filter id="aden"
color-interpolation-filters="sRGB"
filterUnits="objectBoundingBox"
primitiveUnits="objectBoundingBox"
x="0" y="0" width="100%" height="100%">
<!--hue-rotate -->
<feColorMatrix type="hueRotate" values="-20"/>
<!-- contrast -->
<feComponentTransfer>
<feFuncR type="linear" slope=".9" intercept="0.05"/>
<feFuncG type="linear" slope=".9" intercept="0.05"/>
<feFuncB type="linear" slope=".9" intercept="0.05"/>
</feComponentTransfer>
<!-- brightness -->
<feComponentTransfer result="hcb">
<feFuncR type="linear" slope="1.2"/>
<feFuncG type="linear" slope="1.2"/>
<feFuncB type="linear" slope="1.2"/>
</feComponentTransfer>
<!-- blend mode -->
<feImage xlink:href="#adensc" result="grad" x="0" y="0" width="100%" height="100%"/>
<feBlend mode="darken" in="hcb" />
</filter>
</defs>
<image xlink:href="https://una.im/CSSgram/img/atx.jpg" id="image" x="0" y="0" width="612" height="413" preserveAspectRatio="xMidYMid slice" filter="url(#aden)"/>
<image xlink:https://una.im/CSSgram/img/atx.jpg" id="image0" x="612" y="0" width="612" height="413" preserveAspectRatio="xMidYMid slice" />
</svg>