Search code examples
csssvgfontsstroke

CSS Property Stroke is clipping my letters for fonts in SVG

Here is a screenshot of my font (default Arial Black Font):

Example Image

The bottom has fill while the top doesn't have any fill. It gives the correct stroke to most letters but some letters have a clipped off part at the top left such as: E, F, H, I, etc... It basically cuts out a tiny square from some of the letters in their top left.

Any idea as to why it does this? CSS is as follows,

Stroke: "black" stroke-linecap: "butt" stroke opacity: "1" stroke-width: "2.5" stroke-linejoin= "round" paint-order= "stroke"

Solution

  • Just add stroke-linecap="round"

    <svg x="0px" y="0px" width="162px" height="121.634px" viewBox="0 0 162 121.634">
	<line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="3.654" y1="118.134" x2="90.646" y2="3.5"/>
	<line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="90.646" y1="3.5" x2="158.5" y2="118.134"/>
	<line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="158.5" y1="118.016" x2="3.5" y2="118.016"/>
</svg>