1

my problem is quite simple. I have two points and I want to draw a line in between them. The line has to be divided into two parts of the same size. Sadly the ends don't connect to each other at the middle between the two points. A one pixel gap is left.

This gap results form the antialiasing. The half opaque borders of the two elements "add up" to a white gap.

Through the svg attribute "shape-rendering="crispEdges"" I am able to turn off the antialiasing which removes the gap between the elements but then the lines are just "ugly" as can be seen here: http://jsfiddle.net/GsczH/

       <polyline id="line2-part2" stroke="#225788" stroke-width="16" fill="none" points="678.5,124.5 498.5,137.5"/>
       <polyline id="line2-part1" stroke="#0064FF" stroke-width="16" fill="none" points="318.5,150.5 498.5,137.5"/>

These are the line objects the way they are currently implemented. They work perfectly except the gap in between them.

Solutions I tried so far:

-rounding the middlepoint so that the lines overlap, but firstly then the lines aren't perfectly straight anymore and even if I could fix that, the antialisng now adds up the colors which results in a "bump" on the overlapping pixels. (try it with the horizontal line if you want to see what I mean)

-replacing the lines with polygons, which could work, but I couldn't get the corner point calculation precise enough

The simplest/best solution I can come up with at the moment is to get the lineobjects to stop "adding up" to white. In simpler terms, at the moment it is grey+grey=white but I want grey+grey=black. But I don't know if I can get them to do that or not to do so.

Hopefully you can help me to come up with something. Thanks in Advance!

mhatch
  • 4,441
  • 6
  • 36
  • 62
ModernMonkey
  • 21
  • 1

2 Answers2

1

Try adding a square linecap to the lines. This will stretch the lines out a smidge at the ends, to a spot that usually makes more intuitive sense for where the line "should" end.

   <polyline id="line2-part2" stroke-linecap="square" stroke="#225788" stroke-width="16" fill="none"  points="678.5,124.5 498.5,137.5"/>
   <polyline id="line2-part1" stroke-linecap="square" stroke="#0064FF" stroke-width="16" fill="none"  points="318.5,150.5 498.5,137.5"/>
Dan Monego
  • 9,637
  • 6
  • 37
  • 72
0

Looks kinda right in Chrome:

                                     

[...] at the moment it is grey+grey=white but I want grey+grey=black. But i dont know if i can get them to do that or hot to do so [...]

That's a "blending mode" called multiply and it seems it only works in Opera.

In case you're from the future you may be able to use CSS:

<style>
   polyline { blend-mode: multiply; }
</style>
Community
  • 1
  • 1
Camilo Martin
  • 37,236
  • 20
  • 111
  • 154
  • The feBlend answer might work in other browsers if it didn't use `enable-background` and the `BackgroundImage` keyword. I think that feBlend is implemented in all of the browsers that support svg filters, but it's harder to use without `BackgroundImage` support. – Erik Dahlström Jul 16 '13 at 11:39
  • i've looked into blending modes and by now im pretty sure that they may work but nor for my situation since its possible that there are other elements below and above these lineparts which would affect the coloring. The color is also a given value i am not free to change or manipulate – ModernMonkey Jul 16 '13 at 13:33
  • addition: also i have to support all browsers and any devices – ModernMonkey Jul 16 '13 at 13:42
  • @ModernMonkey "all browsers", definitely not IE8. (also, one way is to put something white with normal blending below the multiplied-blend, I guess). – Camilo Martin Jul 16 '13 at 16:42