Код SVG <linearGradient>постоянно ломается при отображении в любом браузере - PullRequest
Новая
       27

Код SVG <linearGradient>постоянно ломается при отображении в любом браузере

0 голосов
/ 22 марта 2019

Я обыскал все уголки сети в поисках решения этой проблемы, но, похоже, ни у кого еще не было этой проблемы.

Вот мой текущий код: 

<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> становятся &nbsp;, а <linearGradient> становится <lineargradient>.

Любая помощьс этим будет оценено.

1 Ответ

0 голосов
/ 22 марта 2019

Разобрался с этим, вставил мой фрагмент кода <linearGradient> в минификатор, который, казалось, решил проблему. Не знаю почему, но он просто сделал.

...