Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an SVG element transparent (using SVGweb)

In a SVG document, I want to make a <path>-element transparent. I tried <path fill="transparent />" but this gives me a black surface in ie8 (which is the default color for unknown values). I use SVGweb to display the SVG in ie8. How do I make it appear transparent in ie8?

EDIT:

According to the SVG-SPEC ( http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint ), the attribute fill takes a value of type <paint>. the value currentColor does work in ie8, yet it's not supported by ff and chrome.

So I'd like to reshape my question: How do I make it appear transparent in ff, chrome and ie8 simultaneously?

like image 604
Mathias Avatar asked Nov 08 '11 17:11

Mathias


People also ask

How do I make SVG fill transparent?

The SVG fill-opacity CSS property is used to set the opacity of the fill color of a shape. The fill-opacity takes a decimal number between 0 and 1. The closer to 0 the value is, the more transparent the fill is. The closer to 1 the value is, the more opaque the fill is.

Can SVG have transparency?

SVG supports animation, transparency, gradients, and is easily scalable without losing quality. PNG is a raster image format used for full-color images (mostly photos) in good quality. It has a rather high compression ratio and supports transparency.

Does SVG have Alpha?

In SVG, you can specify that any other graphics object or 'g' element can be used as an alpha mask for compositing the current object into the background. A mask is defined with a 'mask' element.

How do I make SVG opaque?

You use an addtional attribute; fill-opacity : This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.


1 Answers

fill="none"

Or you can cheat (and hurt performance) with:

fill-opacity="0"
like image 96
Phrogz Avatar answered Sep 22 '22 23:09

Phrogz