The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> stroke in one color, SVG
pinklemon
post Oct 4 2014, 04:30 AM
Post #1


Advanced Member
****

Group: Members
Posts: 140
Joined: 29-June 14
Member No.: 21,166



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pinklemon
post Oct 4 2014, 04:32 AM
Post #2


Advanced Member
****

Group: Members
Posts: 140
Joined: 29-June 14
Member No.: 21,166



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

This post has been edited by pinklemon: Oct 4 2014, 04:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 4 2014, 01:23 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2017 - 02:08 PM