svg: one svg gradiant overlaps another svg on a page

Question

I have two SVG in a HTML file. but the problem is I can't give a different gradient to them. the second SVG is filled with the first svg's gradient color.

First svg:

<div class="wave">
    <svg id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient">
                <stop offset="5%" stop-color="#7f00ffff"></stop>
                <stop offset="95%" stop-color="#e100ffff"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

Second svg:

<div class="wave">
    <svg id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient">
                <stop offset="5%" stop-color="red"></stop>
                <stop offset="95%" stop-color="green"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

in the second svg I give red and green gradiant. but it is not applied. why It is this happening?

s.kuznetsov · Accepted Answer · 2021-06-24T18:57:27.383

You use the same id for different svg. This is #svg and #gradient. Technically, the second svg receives the parameters of the first svg according to id. For this reason, both your svg have the same gradient. The value of this attribute must be unique for each page:

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

For the second svg, use a different id value for <svg id="" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">, <linearGradient id=""> and fill="url()".

For the value of the id of the second svg, I indicated #svg2 and #gradient2 (for example).

<div class="wave">
    <svg id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient">
                <stop offset="5%" stop-color="#7f00ffff"></stop>
                <stop offset="95%" stop-color="#e100ffff"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

<div class="wave">
    <svg id="svg2" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient2">
                <stop offset="5%" stop-color="red"></stop>
                <stop offset="95%" stop-color="green"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient2)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

svg: one svg gradiant overlaps another svg on a page

1 Answers1