CODEWITHSUNDEEP
svg
redanimalwar
redanimalwar

Reputation: 1513

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

.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.

jsbin

Upvotes: 0

Views: 935

Answers (2)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

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

W3C SVG <image> element: http://www.w3.org/TR/SVG11/struct.html#ImageElement

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!

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101820

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

  1. 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.

  2. 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).

Upvotes: 1

Related Questions