我有一个渐变覆盖一个指定为图案的纯色(红色):
<svg width="480" height="480">
<defs>
<pattern width="1" height="1" x="0" y="0" id="pattern">
<rect width="240" height="240" x="0" y="0" fill="rgba(255,0,0,1)"/>
<rect width="240" height="240" x="0" y="0" fill="url(#gradient)"/>
</pattern>
<linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="1"/>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0"/>
</linearGradient>
</defs>
<path
transform="matrix(1,0,0,1,200,200)"
d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0"
fill="url(#pattern)"
/>
</svg>
左:Firefox。右:Chrome
右边的(Chrome)是正确的。
有谁知道如何在Firefox中使用它?
现场观看:http://jsbin.com/eyenoh/edit#html,live
1条答案
按热度按时间pftdvrlh1#
我可以通过使用对象边界框作为模式内容的坐标系来使它工作。
请看这里:http://jsbin.com/efesev/edit#html,live
我会试着进一步调查。看起来像一个bug报告的好候选人。