28999

Adjacent lines inside svg path with stroke-width

Question:

I have a svg with multiple lines inside a path.

<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>

Because of the stroke-width the lines intersect<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/aYhAS.png" data-original="https://i.stack.imgur.com/aYhAS.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Is there any way of making the path continuous without altering the "d" attribute?

Edit:

I am interested in how you can control the joins of multiple objects inside the same path while having a stroke-width defined.

If I would change the "d" attribute and remove the middle Z so that the lines form a triangle the stroke problem would disappear

Answer1:

That's one hell of an overhang for two lines that meet at a point. (Are you using Firefox by any chance? <a href="https://stackoverflow.com/q/29096688/1679849" rel="nofollow">I saw something very similar recently.</a>)

If you want a neat join between two disjoint line segments, your best bet would be to draw them with rounded end caps by adding stroke-linejoin="round" and stroke-linecap="round" to the path element.

And if my suspicion is correct, you can fix the overhang problem by changing fill="orange" to fill="none". Try this:

<pre class="snippet-code-html lang-html prettyprint-override"><svg viewBox="50 50 400 400" width="350" height="350"> <path stroke-width="13" stroke="black" fill="none" stroke-linejoin="round" stroke-linecap="round" d="M 100 100 L 300 100 Z L200 300 z" /> </svg>

Recommend

  • Missing Clickonce prerequisites in Visual Studio 2013
  • Icon's priority on action bar (keeping order of items)
  • Python : Find tuples from a list of tuples having duplicate data in the 0th element(of the tuple)
  • Sending Special characters as a message;
  • Detect if two line segments intersect using Cramer
  • Verify if a service is marked for deletion
  • Drop variable in panel data in R conditional based on a defined number of consecutive observations
  • Centering a specific element among others with flexbox [duplicate]
  • Find record, that has ALL associated records
  • Diagonal of polygon is inside or outside?
  • Get MP3 ID3 meta data and song duration using AudioStreamer
  • Is there a way to pivot a customer ID and a their most recent order dates?
  • Sql indexes vs full table scan
  • Error in GGally: Error in unit(tic_pos.c, “mm”) : 'x' and 'units' must have leng
  • CSS how to fix an element to scroll horizontally with the page but not vertically?
  • How do I change the kernel/python version for iPython?
  • Tap to record like in vine using javacv
  • Can my PDF ping my server when it is opened?
  • How to retrieve information from antrun back to maven?
  • Position: fixed nav does not stay fixed
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Get history of file changes from TFS to implement custom “blame”-behaviour of exceptions
  • Debug.DrawLine not showing in the GameView
  • How to write order and limit within cakephp joins array
  • Django: Count of Group Elements
  • Nant, Vault & Windows Integrated Authentication
  • Fetching methods from BroadcastReceiver to update UI
  • HTML download movie download link
  • Bug in WPF DataGrid
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Symfony2: How to get request parameter
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • GridView Sorting works once only
  • SQL merge duplicate rows and join values that are different
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to set the response of a form post action to a iframe source?