SVG -линеаргрейент сломается при использовании одних и тех же SVG в разных точках перерыва [дублировать] ⇐ CSS

[Anonymous]

Я столкнулся с интересной проблемой с SVG Lineargradient при повторном использовании одного и того же встроенного SVG в нескольких точках останова. В случае использования здесь я хочу использовать этот Single SVG в нескольких точках разрыва в разных областях разметки в DOM. Я не контролирую возможность заменить эту встроенную разметку SVG, так как она поставляется в виде единого поля в CMS и отображается в этих двух местах. < /p>


[*] Существует 2 идентичных встроенных SVG, расположенных под < /code > и
[*] В окне предварительного просмотра на рабочем столе вы не заметите линейного градиента на первой букве. После того, как вы сдвинуте окно предварительного просмотра до мобильного, линейный градиент появляется на первой букве < /li>
Единственный (ручный) способ, который я обнаружил, чтобы решить, что это было обновить один из линейных режимов SVGS атрибут идентификатора к чему-то уникальному, например Linear2 , поместите этот новый идентификатор в атрибут Fill of a .cls header-2 CSS Selecter (

Код: Выделить всё

fill: url(#linear2);

), переименовать этот селектор в нечто уникальное, например, CLS-header-2-desktop , затем обновите прямоугольник SVG до - так, чтобы настольный SVG больше не ссылается на селектор мобильного SVG CSS и линейный диалект. < /li>
Еще один интересный момент в том, что если вы всегда показываете первый SVG, проблема исчезнет. Только когда родительский DIV SVG будет отображаться: нет , 2 -й SVG начинает действовать. Это не кажется прямой проблемой с наличием двух линеарградиентов с тем же идентификатором, потому что он работает с приведенным выше случаем. На самом деле кажется, что 2 -й SVG (настольный компьютер) ссылается на линеарградиент из 1 -го SVG и не может полностью получить к нему доступ, когда он скрыт, даже если есть 2 -й линейный режиссер, который можно найти.


Подробнее здесь: https://stackoverflow.com/questions/603 ... reakpoints