Fill SVG path elements with a background image

Question

Is it possible to set background-image for an SVG <path> element?

For example, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image : url(wall.jpg)} is not available, nor is .wall {background-color: red;}.

Answer 1

You can do this by setting the background to a pattern:

Adjust the width and height according to your image and then reference it from the path like this:

Working example