CODEWITHSUNDEEP
css
user3802921
user3802921

Reputation: 241

Fill SVG Color while it is a background

I am trying to put an svg as background, and then fill it with an color which doesn't work.

#header-container { background-color:transparent; background-image: url(http://somewebsite.com/images/wallp.svg); fill: red; }

This does not seem to work... any advide?

Upvotes: 0

Views: 374

Answers (1)

invernomuto
invernomuto

Reputation: 10211

Working example http://jsfiddle.net/InferOn/p5Az4/3/

HTML

<svg id="header-container" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" i:viewOrigin="226.9077 360.5469" i:rulerOrigin="0.5 -0.5" i:pageBounds="-0.5 612.5 791.5 0.5" width="303.044" height="72.375" viewBox="0 0 303.044 72.375" overflow="visible" enable-background="new 0 0 303.044 72.375" xml:space="preserve">
  <!-- too markup to past here -->
</svg>

CSS

#header-container {fill: red;}

Image Result without your style

enter image description here

Your example, I am sorry, can't work, because the fill property

Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.

You can apply them to shapes and text content elements, in accord to SPEC

Where shape is:

A graphics element that is defined by some combination of straight lines and curves. Specifically: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’.

and text content element is:

A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG 1.1 text content elements are the following: ‘altGlyph’, ‘textPath’, ‘text’, ‘tref’ and ‘tspan’

So

The ‘fill’ property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. The zero-width geometric outline of a shape is included in the area to be painted.

The fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath. Thus, fill operations apply to both open subpaths within ‘path’ elements (i.e., subpaths without a closepath command) and ‘polyline’ elements.

Upvotes: 1

Related Questions