I am using Raphael and I want to create a rect and control the fill property through a CSS.
Everything works fine when I set the fill attr in the classical way:
space = paper.rect(0,0,1000,500).attr({fill: "url('img/cell_background.png')"});
In fact, with this approach I get the correct filling. If inspect the elements I can see that in the rect
element the fill
attribute is specified and it refers to a pattern defined in the svg
's defs
.
<svg>
...
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">
<pattern style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "
id="E6992022-9B75-4D1E-9D44-6EC45CE420A1" x="0" y="0"
patternUnits="userSpaceOnUse" height="5" width="9"
patternTransform="matrix(1,0,0,1,0,0) translate(0,0)">
<image style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "
x="0" y="0"
href="img/cell_background.png" width="9" height="5">
</image>
</pattern>
</defs>
<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "
x="0" y="0" width="1000" height="500" r="0" rx="0" ry="0"
fill="url(#E6992022-9B75-4D1E-9D44-6EC45CE420A1)" stroke="#000"
class="space">
</rect>
...
</svg>
If I instead create the rect
with the following code:
space = paper.rect(0,0,1000,500);
space.node.setAttribute("class","space");
And then in the .css I define:
.space {
fill: url('img/cell_background.png');
stroke: #ff0000;
}
Then the inspected html shows a fill='none'
as rect
attribute, the rectangle is correctly rendered with a red border, but it is filled with a solid black.
Some further observations:
fill: foobar
I obtain a white background;fill: #ff0000
I get the expected red background;From the fourth and fifth point it looks like the file cannot be found, but I think to have exhausted the combination of paths that I should have checked (the css finds other images in the same folder using the '../img' path). I reckon that the problem is somewhere else.
Does anybody had a similar experience?
In SVG you can't just specify a bitmap background url for an element as you do with HTML elements. The standard way of doing this in SVG is through pattern
definitions. Raphael abstracts this messiness from you with a simple fill: url(...)
.
You could load the pattern with your CSS stylesheet with something like...
.space {
fill: url('img/cell_background.svg#bitmap');
stroke: #ff0000;
}
But of course, cell_background.svg#bitmap
still needs to look like...
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="bitmap" x="0" y="0" patternUnits="userSpaceOnUse" height="5" width="9">
<image x="0" y="0" xlink:href="img/cell_background.png" width="9" height="5">
</image>
</pattern>
</defs>
</svg>
But of course this only makes matters more complex.
The reason why your rect is showing up black is because the engine is trying to load a missing fill definition (gradient or pattern), which defaults to black.