HTMLHelp Forums > stroke in one color

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

pinklemon

Oct 4 2014, 04:30 AM

Hello!
Please, if I put stroke to low values, I see 2 pink frames (pink/purple)

Please, how can I get the the stoke is not "double"?
Many thanks!!!

CODE

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:30;fill-opacity:0.2;stroke-opacity:0.5">
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

pinklemon

Oct 4 2014, 04:32 AM

What if I want different opacities for fill and stroke, but do not want the stoke to look "double"?
Many thanks!!!

Christian J

Oct 4 2014, 01:23 PM

I don't know SVG (thanks for pushing me to read up on it!), but according to https://developer.mozilla.org/en-US/docs/We...cy_with_opacity "if you set a stroke opacity on an element, that also has a fill, the fill will shine through on half of the stroke, while on the other half the background will appear", so apparently it's intentional (perhaps like the bevels on a CSS ridge border?).

Instead you might use opacity on the whole RECT element (and fill-opacity if you want) instead of stroke-opacity:

CODE

rect {
opacity: 0.5;
fill:blue;
fill-opacity:0.2;
stroke:pink;
stroke-width:30;
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.