Можем ли мы иметь фон 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. Но, пожалуйста ... заполните меня. Этот метод не будет жизнеспособным решением, по крайней мере, не в его нынешнем состоянии. Я включу код, который я использовал. Но вот 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>




















< /code>
Вот снимок экрана результата, чтобы сэкономить время для всех: < /p>

Они визуализируют как кластеры плитки, в других Слова плитки сгруппированных плиток.
возможна ли плитка и подключение/маскировка? Кажется, все расчеты обрезки выполняются до расчета плитки. Это заставляет меня думать, что могут потребоваться несколько слоистых DOV. Может быть, обрезка с CSS - это маршрут для изучения? (Здесь тоже не уверен, возможна ли плитка и обрезка.) Я также экспериментировал с фетилем, но пока не повезло.

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