CODEWITHSUNDEEP
firefoxgoogle-chromesvg
James
James

Reputation: 111870

SVG pattern inconsistency between chrome and firefox

I have a gradient overlaying a solid color (red) specified as a pattern:

    <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>

Left: Firefox. Right: Chrome

enter image description here

The one on the right (Chrome) is correct.

Does anyone know how to make this work in Firefox?

See it live: http://jsbin.com/eyenoh/edit#html,live

Upvotes: 6

Views: 1877

Answers (1)

Tsvetomir Tsonev
Tsvetomir Tsonev

Reputation: 106494

I was able to get it working by using the object bounding box as coordinate system for the pattern content.

<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>

See it here: http://jsbin.com/efesev/edit#html,live

I'll try to investigate further. Looks like a good candidate for a bug report.

Upvotes: 2

Related Questions