{"id":321460,"date":"2020-09-18T15:35:19","date_gmt":"2020-09-18T22:35:19","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=321460"},"modified":"2020-09-23T16:53:11","modified_gmt":"2020-09-23T23:53:11","slug":"paint-order","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/paint-order\/","title":{"rendered":"paint-order"},"content":{"rendered":"\n<p>The CSS <code>paint-order<\/code> property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we have more control over the resulting appearance.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Where this property really shines is with SVG text, particularly a <code>&lt;text&gt;<\/code> element that has both a fill and a stroke. Like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvGEMde\" src=\"\/\/codepen.io\/anon\/embed\/wvGEMde?height=250&amp;theme-id=1&amp;slug-hash=wvGEMde&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvGEMde\" title=\"CodePen Embed wvGEMde\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Ugh, that stroke is gnarly. It&#8217;s only 6px wide, but it sorta covers the fill. That&#8217;s because the fill is painted first, by default, followed by the stroke. But if we reverse that using the <code>paint-order<\/code> property, the fill gets painted last and covers the unsightly portions of the stroke.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWNLxrg\" src=\"\/\/codepen.io\/anon\/embed\/NWNLxrg?height=250&amp;theme-id=1&amp;slug-hash=NWNLxrg&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWNLxrg\" title=\"CodePen Embed NWNLxrg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Oh gosh, that&#8217;s so much better! We can actually read the text and the stroke is truer to the shape of the characters than before.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">paint-order: normal | [ fill || stroke || markers ]<\/code><\/pre>\n\n\n\n<ul><li><strong>Initial value:<\/strong> <code>normal<\/code><\/li><li><strong>Applies to:<\/strong> shapes and text content elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Normal *\/\npaint-order: normal;\n\n\/* Single values *\/\npaint-order: stroke; \/* same as: stroke fill markers *\/\npaint-order: markers; \/* same as: markers fill stroke *\/\n\n\/* Multiple values *\/\npaint-order: stroke fill; \/* same as: stroke fill markers *\/\npaint-order: markers stroke fill;<\/code><\/pre>\n\n\n\n<p>It&#8217;s worth noting that it&#8217;s totally legit to pass one value. For example, if we did this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">paint-order: stroke;<\/code><\/pre>\n\n\n\n<p>&#8230;then the <code>stroke<\/code> will be painted first, followed by the other values in their default order. Taking that into consideration, this example is equal to the following:<\/p>\n\n\n\n<p>This basically means that the property either accepts a value of <code>normal<\/code> or a combination of <code>fill<\/code>, <code>stroke<\/code> and <code>markers<\/code> in the order they should be painted.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">paint-order: stroke fill markers<\/code><\/pre>\n\n\n\n<p>And what happens if no value or an invalid one is provided? The default order will be used: fill, stroke, markers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">17+<\/td><td class=\"has-text-align-center\" data-align=\"center\">60+<\/td><td class=\"has-text-align-center\" data-align=\"center\">35+<\/td><td class=\"has-text-align-center\" data-align=\"center\">8+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">85+<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">81+<\/td><td class=\"has-text-align-center\" data-align=\"center\">8+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_paint-order\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n<ul><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/fill\/\">fill<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/\">stroke<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-width\/\">stroke-width<\/a><\/code><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"further-reading\">Further reading<\/h3>\n\n\n<ul><li><a href=\"https:\/\/svgwg.org\/svg2-draft\/painting.html#PaintOrder\" rel=\"noopener\">Scalable Vector Graphics (SVG) Level 2 Specification<\/a> (Candidate Recommendation)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The CSS paint-order property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we have more control over the [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","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":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":321460,"position":0},"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":321460,"position":1},"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":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":321460,"position":2},"title":"text-stroke","date":"September 6, 2011","format":false,"excerpt":"text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288473,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-linejoin\/","url_meta":{"origin":321460,"position":3},"title":"stroke-linejoin","date":"May 29, 2019","format":false,"excerpt":"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:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dashoffset\/","url_meta":{"origin":321460,"position":4},"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":331047,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/","url_meta":{"origin":321460,"position":5},"title":"mask-clip","date":"December 18, 2020","format":false,"excerpt":"The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: border, padding or content box. It\u2019s sort of like putting the frame on\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\/321460"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=321460"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321460\/revisions"}],"predecessor-version":[{"id":321908,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/321460\/revisions\/321908"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=321460"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=321460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}