This article needs a technical review. How you can help.
« SVG Attribute reference home
the stroke-linejoin
attribute specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
Usage context
Categories | Presentation attribute |
---|---|
Value | miter | round | bevel | inherit |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
Example
<?xml version="1.0"?> <svg width="120" height="300" viewBox="0 0 120 300" version="1.1" xmlns="https://www.w3.org/2000/svg"> <polyline stroke-linejoin="miter" points="-20,115 60,40 140,115" stroke="black" stroke-width="40" fill="none" /> <polyline stroke-linejoin="round" points="-20,200 60,125 140,200" stroke="black" stroke-width="40" fill="none" /> <polyline stroke-linejoin="bevel" points="-20,285 60,210 140,285" stroke="black" stroke-width="40" fill="none" /> <path d="M-20,115 L60,40 L140,115 M-20,200 L60,125 L140,200 M-20,285 L60,210 L140,285" stroke="white" fill="none" /> </svg>
Live sample
Elements
The following elements can use the stroke-linejoin
attribute