Комбинированный цвет фона и изображение в форме

Question

Я хочу установить этот стиль для SVG <path>:

background-color: red;
background-image: url('myImage.png');

Эта картинка имеет прозрачные пиксели, и мне нужен фоновый цвет, чтобы заполнить ее.

Answer 1

Что бы вы сделали в SVG, это определите <pattern>, который содержит прямоугольник с нужным вам цветом и нужным изображением, а затем используйте его в качестве заливки для <path>.

См. этот пример из тестового пакета SVG.

'background-image' и 'background-color' не применяются к svg-контенту, если он не обрабатывается блочной моделью CSS (так что в основном это простокорневой элемент svg).

Answer 2

Я уверен, что у вас не может быть изображения с цветом фона в одном контуре.

Однако вы можете повторить эффект, имея два контура в одной и той же позиции с траекторией изображения поверх траектории сплошного цвета.