Хранить несколько элементов в SVG и использовать их в качестве фона CSS?

Мне интересно, могу ли я создать несколько "кистей" в одном файле SVG и использовать их, несмотря на мой CSS.

Сейчас у меня есть один SVG файл, который имеет градиент, хранящийся в "defs", и один прямоугольник, который его рисует. Затем я использую этот файл SVG в качестве фонового изображения в своем CSS. Он работает хорошо, но я бы предпочел не иметь миллион отдельных файлов SVG. Я хотел бы объединить как "кисти" вместе в одном файле SVG, что-то вроде CSS-спрайтов или XAML.

Есть ли способ сделать это? Если да, то какой синтаксис указать для фонового изображения CSS, какой элемент SVG из файла svg использовать?

Спасибо за любую помощь.

Ответы

Ответ 1

Теоретически да, это должно быть возможно. Он еще не полностью определен в спецификации w3c, хотя реализации на этом этапе отличаются.

Обратите внимание, что сам svg позволяет специальный синтаксис фрагментов, поэтому теоретически вы должны иметь возможность ссылаться на разные представления одного и того же файла svg. Это можно использовать для спрайтов CSS/SVG.

Связывание непосредственно с идентификатором вложенного фрагмента svg (или любого другого элемента внутри svg) - это то, что необходимо будет уточнить.

Предполагая, что ссылка на фрагменты из свойства фона CSS работает, тогда возможность, если вы используете XHTML (обслуживающий результирующий файл в виде приложения /xhtml + xml), должна включать только ресурсы svg inline в основном документе, устраняя необходимость для многих отдельных файлов. Это можно сделать как готовый сборник, если вы хотите сохранить svgs отдельно для редактирования. Другая возможность заключается в использовании данных uris.

Ответ 2

Я тоже ищу то же самое, и вот указатели, которые я мог найти:

Согласно caniuse.com, есть проблема с поддержкой браузера, но это не мешает вам попытаться наблюдать за будущей эволюцией браузера (в надежде, что в будущем они все будут поддерживать эту очевидную функцию).