 stroke in one color, SVG |
  |
| pinklemon |
 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> |
  |
 
|
| pinklemon |
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 |
|
|
|
| Christian J |
Oct 4 2014, 01:23 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,656 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; } |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 02:16 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC