SVG Linear Gradient SVG Background

Question

I am trying to use an SVG, which will be dynamically created from JavaScript, as the background image on another SVG. This works when the fill color of the object is a solid color, but not when I try to use a linear gradient. Run the code to see an example. Please help figure how to use the linear gradient!

        const createElement = (tag, attributes) => {
            const element = document.createElement(tag);
            if (attributes) Object.keys(attributes).forEach(key => element.setAttribute(key, attributes[key]));
            return element;
        }

        // Create background for first SVG using solid color fill:
        const svg3bg = createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 50 50', width: 50, height: 50 });
        svg3bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: '#00F' }));
        const svg3 = document.getElementById('svg3');
        svg3.style.backgroundImage = `url('data:image/svg+xml,${svg3bg.outerHTML.replace(/\#/g, '%23')}')`; // This does not display unless I replace the # signs with a hex code.
        svg3.style.backgroundColor = 'palegreen';

        // Create background for second SVG using linear gradient fill:
        const svg4bg = createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 50 50', width: 50, height: 50 });
        const lg4 = svg4bg.appendChild(createElement('linearGradient', { id: "lg4" }))
        lg4.appendChild(createElement('stop', { offset: "0%", 'stop-color': '#d67ef5' }))
        lg4.appendChild(createElement('stop', { offset: "50%", 'stop-color': '#2b78ba' }))
        lg4.appendChild(createElement('stop', { offset: "100%", 'stop-color': '#4d79a9' }))
        svg4bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: 'url(#lg4)' }));
        const svg4 = document.getElementById('svg4');
        svg4.style.backgroundImage = `url('data:image/svg+xml,${svg4bg.outerHTML.replace(/\#/g, '%23')}')`;
        svg4.style.backgroundColor = 'palegreen';

    This shows an SVG using another SVG (generated from JavaScript) of blue dots as its background image:
    <div id="div3">
        <svg id="svg3" iewBox="0 0 100 100" style="width: 150; height: 150;">
            <rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
        </svg>
    </div><br>
    When trying to do the same thing with a linear gradient to fill the object instead of a solid color, it does not
    display:
    <div id="div4">
        <svg id="svg4" iewBox="0 0 100 100" style="width: 150; height: 150;">
            <rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
        </svg>
    </div><br>
    This shows what the background image with the linear gradient should look like:
    <div id="div5">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" width="50" height="50">
            <lineargradient id="lg5">
                <stop offset="0%" stop-color="#d67ef5"></stop>
                <stop offset="50%" stop-color="#2b78ba"></stop>
                <stop offset="100%" stop-color="#4d79a9"></stop>
            </lineargradient>
            <circle cx="25" cy="25" r="20" fill="url(#lg5)"></circle>
        </svg>
    </div>

Answer 1

Seems OK to me once I correct all the typos.

• viewBox is missing a v in some places
• units are missing from CSS sizes where they are mandatory
• use createElementNS to create SVG elements and use an XML serializer rather than HTML serialization to get namespaces in the output.
• while not necessary in this case I've fixed the URI encoding properly rather than using replace

const createElement = (tag, attributes) => {
            const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
            if (attributes) Object.keys(attributes).forEach(key => element.setAttribute(key, attributes[key]));
            return element;
        }

        let s = new XMLSerializer();
        // Create background for first SVG using solid color fill:
        const svg3bg = createElement('svg', { viewBox: '0 0 50 50', width: 50, height: 50 });
        svg3bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: '#00F' }));
        const svg3 = document.getElementById('svg3');
        svg3.style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(s.serializeToString(svg3bg))}')`;
        svg3.style.backgroundColor = 'palegreen';

        // Create background for second SVG using linear gradient fill:
        const svg4bg = createElement('svg', { viewBox: '0 0 50 50', width: 50, height: 50 });
        const lg4 = svg4bg.appendChild(createElement('linearGradient', { id: "lg4" }))
        lg4.appendChild(createElement('stop', { offset: "0%", 'stop-color': '#d67ef5' }))
        lg4.appendChild(createElement('stop', { offset: "50%", 'stop-color': '#2b78ba' }))
        lg4.appendChild(createElement('stop', { offset: "100%", 'stop-color': '#4d79a9' }))
        svg4bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: 'url(#lg4)' }));
        const svg4 = document.getElementById('svg4');
        svg4.style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(s.serializeToString(svg4bg))}')`;
        svg4.style.backgroundColor = 'palegreen';

This shows an SVG using another SVG (generated from JavaScript) of blue dots as its background image:
    <div id="div3">
        <svg id="svg3" viewBox="0 0 100 100" style="width: 150px; height: 150px;">
            <rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
        </svg>
    </div><br>
    When trying to do the same thing with a linear gradient to fill the object instead of a solid color, it does not
    display:
    <div id="div4">
        <svg id="svg4" viewBox="0 0 100 100" style="width: 150px; height: 150px;">
            <rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
        </svg>
    </div><br>
    This shows what the background image with the linear gradient should look like:
    <div id="div5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
            <linearGradient id="lg5">
                <stop offset="0%" stop-color="#d67ef5"></stop>
                <stop offset="50%" stop-color="#2b78ba"></stop>
                <stop offset="100%" stop-color="#4d79a9"></stop>
            </linearGradient>
            <circle cx="25" cy="25" r="20" fill="url(#lg5)"></circle>
        </svg>
    </div>