Chrome和Firefox之间的SVG模式不一致

ffx8fchx 于 2023-05-27 发布在 Go

关注(0)|答案(1)|浏览(136)

我有一个渐变覆盖一个指定为图案的纯色（红色）：

<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

google-chrome

来源：https://stackoverflow.com/questions/8929731/svg-pattern-inconsistency-between-chrome-and-firefox

1条答案

按热度按时间

pftdvrlh1#

我可以通过使用对象边界框作为模式内容的坐标系来使它工作。

<pattern width="1" height="1" x="0" y="0" id="pattern" patternContentUnits="objectBoundingBox">
    <rect width="1" height="1" x="0" y="0" fill="rgba(255,0,0,1)"/>
    <rect width="1" height="1" x="0" y="0" fill="url(#gradient)"/>
</pattern>

请看这里：http://jsbin.com/efesev/edit#html,live
我会试着进一步调查。看起来像一个bug报告的好候选人。

赞(0）回复(0）举报 2023-05-27

我来回答

Chrome和Firefox之间的SVG模式不一致

1条答案

相关问题

热门标签

最新问答