CODEWITHSUNDEEP
htmlcsssvg
user7752322
user7752322

Reputation:

SVG lines are displayed in different ways

FIDDLE

https://jsfiddle.net/vmt9z401/

HTML

<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
   <line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
   <text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
   <line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
   <text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
   <line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
   <text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
   <line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
   <text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
   <line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
   <text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
   <line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
   <text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
   <line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
   <text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
   <line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
   <text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
   <line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
   <text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
   <line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
   <text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
   <line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
   <text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
   <line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
   <line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
   <line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
   <line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
   <line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
   <line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
   <line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
   <line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
   <line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
   <line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
   <line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
   <line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
   <line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
   <line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>

CSS

#svg-timer {
  width: 100%;
  display: block;
  height: 350px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  font-family: Arial;
}

.timer-hours {
  stroke: rgb(0, 0, 0);
  stroke-width: 1;
}

.timer-quarters {
  stroke: rgb(0, 0, 0);
  stroke-width: 0.03em;
}

Description

I want to draw 11 lines, one for each hour - which are all the same (timer-hours class). They got a text beneath them. Everything works fine to this point.

Question

The lines have different thicknesses - why do they have not the same "thickness" ?

I got two different screens and i get the problem on both.

I also tried with 

stroke-width: 0.1em;

but there is no change.

Do i need another unit (px)?

On the Screenshot, it also looks different?!

Screenshot

enter image description here

Upvotes: 0

Views: 74

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The lines have different thicknesses - why do they have not the same "thickness" ?

The answer is "because of anti-aliasing". Antialiasing is the use of semi-transparent pixels along the edges of a shape. The purpose is to smooth out the look of the edges to simulate the fact that the edge of the shape is covering only a portion of the edge pixels. So, for example, a black shape that covers only half of a pixel will be drawn as a black pixel that is 50% transparent. Resulting in a 50% grey pixel, assuming it is on a white background.

Your lines have erratic widths because of anti-aliasing, and is exacerbated by the fact that your lines are positioned at inconsistent places relative to pixel boundaries.

Anti-aliasing is great, but it has limits. Using shape-rendering="crispEdges" can help. But a possibly better solution is to choose a graph size so that your graph lines align to pixel boundaries. You either have to choose whole pixel coordinates, or half (0.5) coordinate values depending on whether your stroke-width is even or odd.

See this answer for more information:

https://stackoverflow.com/a/23376793/1292848

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

Add shape-rendering: crispEdges;

#svg-timer {
  width: 100%;
  display: block;
  height: 350px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  font-family: Arial;
  shape-rendering: crispEdges;
}

.timer-hours {
  stroke: rgb(0, 0, 0);
  stroke-width: 1;
}

.timer-quarters {
  stroke: rgb(0, 0, 0);
  stroke-width: 0.03em;
}
<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
   <line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
   <text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
   <line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
   <text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
   <line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
   <text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
   <line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
   <text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
   <line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
   <text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
   <line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
   <text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
   <line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
   <text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
   <line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
   <text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
   <line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
   <text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
   <line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
   <text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
   <line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
   <text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
   <line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
   <line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
   <line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
   <line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
   <line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
   <line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
   <line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
   <line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
   <line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
   <line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
   <line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
   <line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
   <line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
   <line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>

Upvotes: 1

Related Questions