SVG gradients with p3 colors

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 240">
    <defs>
        <linearGradient id="Gradient-sRGB" x1="0" y1="15" x2="100" y2="15" gradientUnits="userSpaceOnUse" color-interpolation="sRGB">
            <stop offset="0" stop-color="color(display-p3 1 0 0)"/>
            <stop offset="1" stop-color="color(display-p3 0 1 1)"/>
        </linearGradient>
        <linearGradient id="Gradient-linearRGB" x1="0" y1="15" x2="100" y2="15" gradientUnits="userSpaceOnUse" color-interpolation="linearRGB">
            <stop offset="0" stop-color="color(display-p3 1 0 0)"/>
            <stop offset="1" stop-color="color(display-p3 0 1 1)"/>
        </linearGradient>
        <linearGradient id="Gradient-auto" x1="0" y1="15" x2="100" y2="15" gradientUnits="userSpaceOnUse" color-interpolation="auto">
            <stop offset="0" stop-color="color(display-p3 1 0 0)"/>
            <stop offset="1" stop-color="color(display-p3 0 1 1)"/>
        </linearGradient>
    </defs>

    <text x="28" y="15" font-size="8" font-family="Arial" style="line-height: 16px;">sRGB (default)</text>
    <rect width="100" height="30" fill="url(#Gradient-sRGB)" transform="translate(5,23)"/>

    <text x="141" y="15" font-size="8" font-family="Arial" style="line-height: 16px;">linearRGB</text>
    <rect width="100" height="30" fill="url(#Gradient-linearRGB)" transform="translate(110,23)"/>

    <text x="257" y="15" font-size="8" font-family="Arial" style="line-height: 16px;">auto</text>
    <rect width="100" height="30" fill="url(#Gradient-auto)" transform="translate(215,23)"/>
</svg>