SVG lines are displayed in different ways
0
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
html css svg
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
add a comment |
0
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
html css svg
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36
add a comment |
0
0
0
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
html css svg
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
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
html css svg
html css svg
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
asked Nov 14 '18 at 9:01
louis12356louis12356
7910
7910
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36
add a comment |
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36
add a comment |
2 Answers
2
active
oldest
votes
1
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
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
add a comment |
1
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>answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296349%2fsvg-lines-are-displayed-in-different-ways%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
add a comment |
1
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
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
add a comment |
1
1
1
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
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
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
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
answered Nov 15 '18 at 5:30
Paul LeBeauPaul LeBeau
56.8k56795
56.8k56795
add a comment |
add a comment |
1
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>answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
add a comment |
1
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>answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
add a comment |
1
1
1
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>answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
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>#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>#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>answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
answered Nov 14 '18 at 9:34
Robert LongsonRobert Longson
78k13157163
78k13157163
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
add a comment |
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
yeah, but it works only with lines and stroke-width >= 1. Smaller lines are sometimes not displayed.
– louis12356
Nov 14 '18 at 14:35
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
you'd have to carefully ensure such lines are drawn on pixel boundaries.
– Robert Longson
Nov 14 '18 at 14:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296349%2fsvg-lines-are-displayed-in-different-ways%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I can't understand your question. It would be better if the JSFiddle matched your code too.
– MSC
Nov 14 '18 at 9:36