Можем ли мы иметь фон SVG, которые плитки, с градиентной заполнением, которой нет? ⇐ CSS

[Anonymous]

возможно ли иметь фон SVG с полноэкранным градиентом? img alt = "Один круг с твердой серой наполнителем" src = "https://i.sstatic.net/aiwuc58j.png" width = "128"/>
Вот разметка SVG для Круг выше (ОК, не самый чистый способ кодировать круг, но содержание может быть чем угодно): < /p>

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

.st0 {
fill: #6887b5;
}

.st1 {
fill: #b2b2b2;
}







< /code>
И вот SVG радиального градиента: < /p>




.st0 {
fill: url(#radial-gradient);
}

Но мы хотим добавить градиентное заполнение, которое простирается все плиток в заднем плане:

Вы можете сказать: «Просто сделайте внутреннюю внутреннюю часть кругов прозрачными и добавьте полноэкранный градиент в качестве другого фона, сложенного за кругом фона». И это было бы хорошо в некоторых случаях. Но если вы заметили, фон круга уже имеет прозрачность - вокруг кругов.
Я подозреваю, что ответ будет: это можно сделать с помощью css, но не внешний css. Но, пожалуйста ... заполните меня. Потому что нет поле для разметки SVG. Но вот HTML: < /p>

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

SVG - Tile + Full Screen Gradient Test

body.svg-bg {
background-image: url(tile-and-full-02.svg);
background-position: center;
background-repeat: repeat;
}





< /code>
А вот Svg: < /p>

Это иллюстрирует, почему ответ Chrwahl - по крайней мере в его нынешнем состоянии - не жизнеспособное решение.


Подробнее здесь: https://stackoverflow.com/questions/793 ... hat-doesnt