{"id":288473,"date":"2019-05-29T11:07:23","date_gmt":"2019-05-29T18:07:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=288473"},"modified":"2019-05-29T11:07:23","modified_gmt":"2019-05-29T18:07:23","slug":"stroke-linejoin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linejoin\/","title":{"rendered":"stroke-linejoin"},"content":{"rendered":"<p><code>stroke-linejoin<\/code> is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. <code>stroke-linejoin<\/code> can be used to sharpen or soften the joints on connecting lines in an SVG.<\/p>\n<p><code>stroke-linejoin<\/code> is also an SVG attribute which can be overwritten using CSS.<\/p>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">stroke-linejoin: miter;<\/code><\/pre>\n<figure id=\"post-288474\" class=\"align-center media-288474\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"152\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/miter-stroke-linejoin.png?resize=270%2C152&#038;ssl=1\" alt=\"Two paths joining with a miter joint\" data-recalc-dims=\"1\" \/><figcaption>A miter joint<\/figcaption><\/figure>\n<p><code>stroke-linejoin<\/code> is just one of several properties affecting the rendering of two paths meeting. The final visual effect will depend on <code>stroke-linejoin<\/code> as well as values for other SVG properties such as <code>stroke-miterlimit<\/code> and <code>stroke-align<\/code>.<\/p>\n<h3 id=\"syntax\">Syntax<\/h3>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">stroke-linejoin: [ crop | arcs | miter ] || [ bevel | round | fallback ]<\/code><\/pre>\n<p class=\"explanation\">At the moment, browsers seem to support only a single value for <code>stroke-linejoin<\/code>. However, according to the <a href=\"https:\/\/www.w3.org\/TR\/fill-stroke-3\/#stroke-linejoin\" rel=\"noopener\">W3C Working Draft of the CSS Fill and Stroke Module<\/a>, there are ideas of combining two values (one from <code>crop | arcs | miter<\/code> and one from <code>bevel | round<\/code>) to create a combination of effects for <code>stroke-linejoin<\/code>.<\/p>\n<h3 id=\"values\">Values<\/h3>\n<p><code>stroke-linejoin<\/code> accepts the following values:<\/p>\n<ul>\n<li><code>crop<\/code> extends the minimal amount past the corner necessary to form a convex corner. This is effectively the same as <code>miter<\/code> except that <code>crop<\/code> forces the <code>stroke-miterlimit<\/code> to behave as if it were set to a value of &#8220;1&#8221;.<\/li>\n<li><code>arcs<\/code> forms a point with the same curvature as the connecting paths.<\/li>\n<li><code>miter<\/code> joins the lines at a sharp point.<\/li>\n<li><code>bevel<\/code> crops the connecting point perpendicularly to the joint.<\/li>\n<li><code>round<\/code> is similar to <code>bevel<\/code>, except a circular &#8220;rounded&#8221; edge is added instead of a flat line.<\/li>\n<\/ul>\n<h3 id=\"example\">Example<\/h3>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BePMdd\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"stroke-linejoin example\n\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/andyadams\/pen\/BePMdd\" rel=\"noopener\">stroke-linejoin example<br \/>\n<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"Opera\" class=\"yep\">Yes<\/td>\n<td data-browser-name=\"IE\" class=\"yep\">9+<\/td>\n<td data-browser-name=\"Android\" class=\"yep\">4.4+<\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/\"><code>stroke<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/\"><code>stroke-dasharray<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/\"><code>stroke-dashoffset<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/\"><code>stroke-linecap<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/\"><code>stroke-width<\/code><\/a><\/li>\n<\/ul>\n<h3>Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/fill-stroke-3\/#stroke-linejoin\" rel=\"noopener\">W3C Working Draft of the CSS Fill and Stroke Module<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>stroke-linejoin is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. stroke-linejoin can be used to sharpen or soften the joints on connecting lines in an SVG. stroke-linejoin is also an SVG attribute which can be overwritten using CSS. stroke-linejoin: miter; A miter joint stroke-linejoin [&hellip;]<\/p>\n","protected":false},"author":223334,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":236664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/","url_meta":{"origin":288473,"position":0},"title":"stroke-dashoffset","date":"January 12, 2016","format":false,"excerpt":"The stroke-dashoffset property in CSS defines the location along an SVG path where the dash of a stroke will begin. The higher the number, the further along the path the dashes will begin. .module { stroke-dashoffset: 100; } Remember: This will override a presentation attribute This will not override an\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":288473,"position":1},"title":"stroke","date":"January 12, 2016","format":false,"excerpt":"The stroke property in CSS is for adding a border to SVG shapes. .module { stroke: black; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke property can accept any CSS color value. Named colors \u2014 orange Hex colors \u2014\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236645,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","url_meta":{"origin":288473,"position":2},"title":"stroke-dasharray","date":"January 18, 2016","format":false,"excerpt":"The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them. path { stroke-dasharray: 5; \/* dashes and gaps are both 5 units long *\/ } It's a\u2026","rel":"","context":"In \"stroke\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236637,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/","url_meta":{"origin":288473,"position":3},"title":"stroke-width","date":"January 12, 2016","format":false,"excerpt":"The stroke-width property in CSS is for setting the width of a border on SVG shapes. .module { stroke-width: 2; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-width property can accept any number, including whole numbers, decimals, and percentages:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236642,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linecap\/","url_meta":{"origin":288473,"position":4},"title":"stroke-linecap","date":"January 12, 2016","format":false,"excerpt":"The stroke-linecap property in CSS is for setting the starting and ending points of a border on SVG shapes. .module { stroke-linecap: round; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke-linecap property can accept the following values: butt (default):\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":246112,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/convert-polygon-path-data\/","url_meta":{"origin":288473,"position":5},"title":"Convert Polygon to Path Data","date":"October 3, 2016","format":false,"excerpt":"I've had to do this a few times recently so I thought I'd save the method. StackOverflow has a method that works great: [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,'path'); var points = poly.getAttribute('points').split(\/\\s+|,\/); var x0=points.shift(), y0=points.shift(); var pathdata = 'M'+x0+','+y0+'L'+points.join(' '); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('id',poly.getAttribute('id'));\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/288473"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223334"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=288473"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/288473\/revisions"}],"predecessor-version":[{"id":288576,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/288473\/revisions\/288576"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=288473"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=288473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}