CODEWITHSUNDEEP
svg
Sunny
Sunny

Reputation: 10075

How to make SVG stroke-width consistent across the entire path?

Here is an example:

<svg  width="60" height="30">
   <path stroke="red" stroke-width="1" fill="none" d="M0 25 L10 25 L45 5 L55 5"/>
</svg>

I find that the inclined line segment has a thinner stroke-width then the horizontal lines. How do I make the stroke-width consistent across the entire path?
Breaking the path into multiple paths did not help as the line joins are not elegant. The points are generated dynamically so the solution needs to be generic.

Upvotes: 0

Views: 260

Answers (1)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21173

<svg width="180" height="120">
    <g stroke="red" fill="none">
      <g stroke-width="1">
        <path id="p" d="M0 25l10 0l35-20l10 0" />
        <use href="#p" y="25" shape-rendering="optimizeQuality"/>
        <use href="#p" y="50" shape-rendering="crispEdges"/>
      </g>
      <use href="#p" stroke-width="2" x="60"/>
      <use href="#p" stroke-width="3" x="120"/>
    </g>
</svg>

I added stroke-width 2 and 3 to your example. The effect is less because more pixels are being used to draw the line.

At 1 pixel your monitor and Browser can't make much of it. Only add (some) anti-aliasing.

screenshot zoomed:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering won't help
because it is still your monitor/browser only having 1 pixel to draw that line

Same for CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering..
it is still 1 pixel

Same for setting style="transform:translateZ(0)"

Maybe in the future with Quantum Dot display technology it will look better. https://en.wikipedia.org/wiki/Next_generation_of_display_technology

Upvotes: 1

Related Questions