How to use css fill: on image elements inside svg?

Question

.i image,
.i path,
.i {
  fill: red;
  stroke: red;
  margin-top: 5px;
}

<svg class="i">
    <image class="i" xlink:href="https://nextgenthemes.com/wp-content/bubble.svg" height="100%" width="100%"/>
</svg>

It does work if I use the <use> element and reference a symbol from a svg definitions file.

Also maybe try doing it inline, there might be an issue with your stylesheet being referenced — Dave, Nov 17 '15 at 07:00
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes — Dave, Nov 17 '15 at 07:08
Its works fine with fill when its a svg with a reference to a svg sprite with the use tag. Thanks for your suggestions but this do no help. Looks like its not possible. And I was about this think I found THE HTTP/2 read solution for icons. — redanimalwar, Nov 17 '15 at 07:12

score 1 · Answer 1 · answered Nov 17 '15 at 12:58

What you want is not possible, for two different reasons.

SVGs loaded via HTML <img> or background-image, or via an SVG <image> can be considered as being rendered to a static form whose contents are not styleable by the parent. Think of it as having been converted to a bitmap.
CSS rules do not apply across document boundaries. You cannot have rules in one document (the HTML) that style elements in another document (in this case the SVG bubble.svg).

Jonathan Marzullo · Accepted Answer · 2015-11-17T20:42:32.983

1

The SVG <image> element does not accept fill as an attribute. So it would not accept the CSS fill equivalent.

Attribute definitions for the SVG <image> element :

x = The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed. If the attribute is not specified, the effect is as if a value of '0' were specified. Animatable: yes.
y = The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed. If the attribute is not specified, the effect is as if a value of '0' were specified. Animatable: yes.
width = The width of the rectangular region into which the referenced document is placed. A negative value is an error (see Error processing). A value of zero disables rendering of the element. Animatable: yes.
height = The height of the rectangular region into which the referenced document is placed. A negative value is an error (see Error processing). A value of zero disables rendering of the element. Animatable: yes.
xlink:href = A IRI reference. Animatable: yes.

If it works with the SVG <use> element than use it!

edited Nov 17 '15 at 20:42

answered Nov 17 '15 at 20:34

Jonathan Marzullo

I feared this. The reason I don't want to use `` is I would need to include svg-for-everybody because not all browsers support referecing to external svg definitions with anchors `svgdev.svg#icon1`. Also I am coding this for a HTTP/2 world where sprites are actually bad practice. So I would actually reference a single icons with a ID in lots of definition files. The use without a ID to a simple svg file did not work with use `` my guess is that it is not supported/intended to do that. So when I came across `` I was happy and thought this is the solution I need. – redanimalwar Nov 17 '15 at 22:03
I use `` now and then a small JS function to transform it to a inline ` – redanimalwar Nov 17 '15 at 22:06
When using the `` element and if it is referencing SVG elements inside a SVG `` element with CSS. You can not use CSS on anything inside a `` element due to CSS not being directly rendered in `` or elements. In that case you must change the attributes instead. `` https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs .. But glad you got it working :) – Jonathan Marzullo Nov 18 '15 at 12:52

2 Answers2