CSS background to an SVG element

Question

I'm trying to create an HTML that has an inline SVG that has an element with a CSS background:

<html>
<body>
<svg>
    <foreignObject width="50" height="50">
        <div style="red; width:50; height:50"></div>
    </foreignObject>
    <rect width="50" height="50" transform="translate(100,0)" style="red"/></svg>
</body>
</html>

For the foreighObject the background is shown, but not for the rect Why is that?
What I'm eventually trying to achieve is to have a sprite image as the background for several images in the SVG

EDIT: Eventually I want the fill to be a piece of a large image and not just red. It looks like that's not possible with just fill

Please update your question with all relevant code. Currently your question is unanswerable as it's unclear what the desired output is and what's preventing it from displaying as per your requirements. — tao, Jun 03 '19 at 11:53
`style="fill: red"`seems more likely for the `rect`. For the div the style will do nothing since `red` isn't a style property it's a color. — Paulie_D, Jun 03 '19 at 11:55

score 1 · Answer 1 · answered Jun 03 '19 at 12:07

style="red" is not looking correct, the correct way was "fill:red" or "fill:#00562";

<!-- Simple rectangle -->
  <rect width="100" height="100" fill="red"/>

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" fill="red"/>
</svg>

For reference These are the attributes commonly used for rect:-

clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

score 0 · Answer 2 · answered Jun 03 '19 at 12:56

You have to always use the right styling tags for HTML elements and svg elements then it will work

<svg>
    <foreignObject x="0" y="0" width="50" height="50">
        <div style="background: red; width:50px; height:50px"></div>
    </foreignObject>
    <rect width="50" height="50" transform="translate(100,0)" style="fill: red"/>
</svg>

CSS background to an SVG element

2 Answers2