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>代码片段粘贴到一个缩小器中，该缩小器似乎可以解决该问题。不知道为什么，但确实如此。

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

1 个答案: