Is this some sort of bug in Chrome?
What seems to be the issue?
Here’s the code isolated:
.jacketb .lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke:#0059dd;
stroke-width: 3px;
}
<svg class="lines">
<line x1="87" y1="0" x2="87" y2="168"></line>
<line x1="178" y1="0" x2="178" y2="338"></line>
</svg>
Chrome
Firefox
My knowledge of SVG is limited but I do believe the supplied script is not taking advantage of SVG - which is the abbreviation for Scalable Vector Graphics.
I far prefer to have a containing/parent DIV that can be easily positioned, preferably responsive and has the inner child SVG script.
Adopting this technique is ideal for watches, mobiles, laptops, desktops, and very large screen sizes.
Try this, see what you think and let me know if the blurry lines exist in some browsers:
<div
style="
width:42%; margin:1em auto;
border: dotted 2px red;
padding: 1em;
"
title="OPEN"
>
<svg viewBox="0 0 100 60"
style="
background: url(https://i.imgur.com/92kMrMf.jpg);
background-size: cover;
border-radius: 12%;
">
<line
x1="33.33%" y1="0"
x2="33.33%" y2="99.99%"
style="stroke: lime; stroke-width:0.88;"
></line>
<line
x1="66.66%" y1="0"
x2="66.66%" y2="99.99%"
style="stroke: yellow; fill:none;"
></line>
</svg>
<hr>
<dl>
<dt>Image:
<br>src: https://i.imgur.com/92kMrMf.jpg
<br>dims: 266px × 342px
</dt>
<dd>
<img
src="https://i.imgur.com/92kMrMf.jpg" alt="#"
width="266" height="342"
>
</dd>
</dl>
</div>
I will leave it up to you to remove the style and make appropriate classess and identifiers.
I have a couple of questions.
Do the stroke rules for the <svg> element get applied to the <line> elements?
Where are the two end points as specified by the x2 and y2 values?
I believe that’s just anti-aliasing in Chrome. It’s not noticeable to me unless I zoom to about 300%.
If you google around you will see others have mentioned this and one fix seems to be to add shape-rendering="crispEdges" to the svg.
<div class="jacketb" title="OPEN"> <svg class="lines">
<line x1="87" y1="0" x2="87" y2="168" shape-rendering="crispEdges"></line>
<line x1="178" y1="0" x2="178" y2="338" shape-rendering="crispEdges"></line>
</svg> </div>
I don’t know if it has any downsides but seems to work for Chrome.
This says don’t use that.
I found these which explains each:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
geometricPrecision
Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.
Obviously for round circles you wouldn’t want crispedges but for two straight lines it’s exactly what you want!
Did you not try it for yourself and see what your own eyes tell you?
It worked. I compared them all.
crispEdges worked the best.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.