SVG gradient doesn't work

[MartinKavik]

    div![
        raw![r##"<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="16" fill="#3751FF"/>
                <path d="M11 10C11 9.44772 11.4477 9 12 9H15.9905C18.2127 9 19.9333 9.60955 21.1524 10.8287C22.3841 12.0478 23 13.765 23 15.9803C23 18.2088 22.3841 19.9391 21.1524 21.1713C19.9333 22.3904 18.2127 23 15.9905 23H12C11.4477 23 11 22.5523 11 22V10Z" fill="url(#paint0_linear)"/>
                <defs>
                    <linearGradient id="paint0_linear" x1="11" y1="9" x2="23" y2="23" gradientUnits="userSpaceOnUse">
                        <stop stop-color="white" stop-opacity="0.7"/>
                        <stop offset="1" stop-color="white"/>
                    </linearGradient>
                </defs>
            </svg>"##
        ],
    ]

It should render letter D with gradient on a blue circle. Only cirle is rendered. It works when fill in path is set to e.g. black (fill="black").
So it looks there is a problem with url in fill="url(#paint0_linear)". There were many bugs and strange behavior in gradient handling by browsers (Chrome, Firefox and others) so it's possible it isn't a bug in Seed, but maybe Seed somehow affects url resolving or rendering.
Note - SVG has been generated by Figma.

[klemens]

I also just hit this problem. Executing svgElement.outerHTML = svgElement.outerHTML in the console makes the gradient work in my case, in both chromium and firefox.

A workaround that doesn't involve calling js functions is to move the defs into a separate, zero-size svg, which you can add to the html directly. However this only works if your defs are static.

Any idea how to debug this further?

[MartinKavik]

I recommend to try some experiments / hacks / workarounds in set_default_element_state and patch_el_details.
Unfortunately I'm not able to help more now - but some tips / ideas:

• Url resolving by browser is unpredictable and DOM modifications brake it - see e.g. https://stackoverflow.com/a/15138428
• If I'm not wrong, Seed adds namespace to all SVG elements manually - maybe it breaks somehow relations between elements and then id with the gradient cannot be found.
• Maybe Seed ignores some SVG-specific elements / comments / attributes in the HTML code that are important for gradient functionality (e.g. there is missing version of the new SVG specification that supports gradients; or something like that).
• Maybe there is a weird bug in the browser (we found two super-weird browser bugs already in browsers during Seed development, so it's possible).

It's hard-to-debug bug and I would be very glad if you manage to write at least an ugly hack to fix it. Good luck and don't hesitate to write me on chat or here so we can resolve it faster.

[klemens]

Ok, I found the problem. Fortunately it is completely unrelated to url resolving. 😅 (was already going down that rabbit hole before creating commenting the first time on this issue)

My first observation was that a svg with a linearGradient works correctly when I construct it using the seed macros, only using raw! doesn't work.

After some diffing I found the problem: SVG is pure XML and so element names are case sensitive, while HTML elements don't care. So the linearGradient turns into a lineargradient, which doesn't work. I am not 100% sure why setting is as a string using JS worked, but I guess there is some magic in there that automatically adds the correct namespaces and corrects the case of elements.

Proposed fix in #447.