SVG 代码在任何浏览器中呈现时都会中断

Question

我已经搜索了网络的各个角落寻找解决方案，但似乎没有其他人有这个问题。

这是我目前的代码：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="mygradient">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="yellow"/>
        </linearGradient>
    </defs>
    <path id="myID" d="M 0 78.37136556477951 C 207.875 51.32892778872315 207.875 51.32892778872315 415.75 64.85014667675132 C 623.625 78.37136556477951 623.625 78.37136556477951 831.5 60.035876993171016 C 1039.375 41.70038842156255 1039.375 41.70038842156255 1247.25 64.68862384088634 C 1455.125 87.67685926021014 1455.125 87.67685926021014 1663 60.035876993171016 L 1663 3756 L 0 3756 Z" fill="url(#mygradient)"/>
</svg>

每当任何浏览器尝试渲染时，<linearGradient>都会完全中断。这是它在浏览器中呈现的方式：

<lineargradient&nbsp;id="mygradient"><stop&nbsp;offset="0%"&nbsp;stop-color="red"></stop&nbsp;offset="0%"&nbsp;stop-color="red"><stop&nbsp;offset="100%" stop-color="yellow"></stop&nbsp;offset="100%"></lineargradient&nbsp;id="mygradient">

正如你所看到的，<linearGradient>中的所有空间都变成了 而<linearGradient>变成了<lineargradient>。

任何帮助都将不胜感激。

Answer 1

排除这一个，将我的<linearGradient>代码片段粘贴到一个似乎解决问题的缩小器中。不知道为什么，但它只是做了。