Forum Bugs

Transparency in SVG

fredsmith
Prince is applying opacity to sibling nodes in SVG.

Here is an example:

<svg viewBox="0 0 794 1123" width="794px" height="1123px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<rect fill-opacity="0.5" fill="#000000" width="10" height="10"/>
	<image xlink:href="winter.jpg" width="130" height="107" />
</svg>


The bitmap image will show up with a transparency of 0.5

The only way that I have found to fix this is to add another element inbetween eg:

<svg viewBox="0 0 794 1123" width="794px" height="1123px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<rect fill-opacity="0.5" fill="#000000" width="10" height="10"/>
             <rect fill-opacity="1" x="-999999" fill="#000000" width="10" height="10"/>
	<image xlink:href="winter.jpg" width="130" height="107" />
</svg>


Strangely I have noticed similar behaviour with Batik - issue with a common library or incorrect SVG spec?

Edit: This issue will show up regardless of how much further in the DOM the following bitmap image is nested. If there are no intervening nodes with fill-opacity set to 1 then the image will inherit the opacity.

Bug does not affect any other vector shapes in the document.
mikeday
That is strange. We don't share any code with Batik, so perhaps we have each misinterpreted the specification in a similar way. I know that we still have some issues related to opacity, so we'll have to investigate this for a future release.