A simple example illustrating the css paint-order property.
xxxxxxxxxx <meta charset="utf-8"><head> <style> body { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; position: relative; } .info { margin-top: 1em; margin-left: 1em; } .cite-info { margin-top: 0.5em; } .property-title { margin-top: 0.5em; } form { margin-left: 1em; } .swan { fill:black; stroke: red; stroke-width: 60px; /*we're scaling, so needs to be larger */ } </style></head><body> <div class="info"> <div class="main-info">This little example demonstrates the effect of the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a> css property for an svg <i>path</i> element. This property can be used to get a nicer border, as it can tell the browser to first draw the stroke, and then do the fill. The default value of "fill" causes the browser to do the fill first and then the stroke, which can lead to suboptimal results. </div> <div class="cite-info">The svg for the swan is by <a href="https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/">Gordon Johnson</a>.</div> <div class="property-title">Value for "paint-order" property:</div> <form> <input type="radio" name="paint-order" value="fill" id="paint-order-fill"> <label for="paint-order-fill">Fill (default if not specified)</label><br> <input type="radio" name="paint-order" value="stroke" id="paint-order-stroke"> <label for="paint-order-stroke">Stroke</label><br> </form> </div> <script src="//d3js.org/d3.v4.min.js"></script> <script> var width = 960, height = 600; //swan svg // https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/ // public domain //<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" // viewBox="0 0 2270 1720.1041" enable-background="new 0 0 2270 1720.1041" xml:space="preserve"> var g_SwanPath = 'M304.8339,1618.0433c-34.8443-45.5265-24.218-162.9536,13.3191-294.7738c1.2148-4.2662,2.8029-8.4308,4.67-12.4546' + 'c29.7564-64.1257,52.3294-129.1842,67.4734-195.2076c51.5251-161.5287,94.3274-320.8143,127.5042-477.6243' + 'c6.308-24.2145,10.9305-46.0526,13.0299-64.3335c1.5645-13.6223,5.0762-26.863,9.1556-39.9539' + 'c0.7114-2.2827,1.0774-4.7339,1.0754-7.365c2.9453-15.8967,3.6573-31.5959,2.1908-47.1029' + 'c-0.9938-10.5073-0.4436-21.0928,0.9762-31.5511c2.46-18.12,1.7054-36.9332-3.167-40.7521' + 'c-3.8127-5.7191-8.5802-13.6949-12.8798-21.1176c-7.2252-12.4735-11.3275-26.5457-11.7297-40.9551' + 'c-0.1105-3.9579-0.3208-7.735-0.7592-11.2041c-0.7616-6.0274-5.9535-10.481-12.0236-10.2287' + 'c-14.4256,0.5998-29.718-1.3261-45.5717-4.886c-45.9689-10.5904-130.0027,0-141.3747,3.1014' + 'c-66.9441,27.7135-138.7008,51.8138-214.2594,73.0598c-3.0797,0.866-5.8099,2.6716-7.8351,5.1481' + 'c-2.5822,3.1576-6.266,7.2096-8.4471,7.5991c-3.6184,0.6461-5.686-5.686-5.686-5.686c-1.6334-9.8945-1.6764-19.3877-0.0309-28.4546' + 'c0.7585-4.1798,2.8682-7.9965,6.0087-10.8573l29.3922-26.7746c3.9683-3.6149,8.3697-6.7393,13.1441-9.193' + 'c46.4728-23.8836,81.7318-52.6664,102.3964-87.8247c1.7236-2.9325,0.9662-6.7585-1.8496-8.6667' + 'c-22.5259-15.2652-23.9696-36.1549-10.6995-60.9698c0.9986-1.8674,2.3123-3.5486,3.8485-5.0061' + 'c83.5539-79.279,244.0396-129.4157,340.5836-90.4908c103.5163,43.4262,161.534,108.7088,171.7593,214.2847' + 'c0.1364,1.4075,0.4255,2.7938,0.8593,4.1397c50.3245,156.123-38.8171,527.5426-82.9946,879.9554' + 'c-0.2051,1.6364,1.875,2.4932,2.9058,1.2058c193.9075-242.155,395.4191-404.4522,607.8033-452.565' + 'c1.0865-0.2462,2.1687-0.5388,3.2316-0.8726c45.7448-14.3669,86.4229-20.8707,115.0131-8.6146' + 'c2.942,1.2612,6.2184,1.3896,9.2697,0.4223c16.3136-5.1722,32.8452-8.0765,49.6045-8.6195' + 'c4.9473-0.1603,9.7422-1.8657,13.693-4.8477c10.2054-7.703,17.7822-19.0728,39.0336-17.6369' + 'c19.1256,1.2923,83.4808,52.9832,109.8433,74.7796c10.8676,1.3658,25.2313,0.9236,36.6232,4.0772' + 'c9.9805,2.7628,20.5455,1.618,29.9357-2.7487c37.4032-17.3939,89.8586-18.1865,160.192,0.7391' + 'c26.6881-1.7002,52.0995,0.2357,76.0198,6.4196c4.3241,1.1179,7.1786,5.2768,6.6101,9.7066' + 'c-0.9686,7.5479-4.4778,14.5042-9.5732,21.0914c43.976,13.0238,79.6447,32.1691,95.6282,65.8198' + 'c24.3445,7.963,39.4833,22.6735,37.2175,50.1402c21.144,6.2525,32.1763,21.1316,21.1934,54.7924' + 'c7.6846,7.8566,10.1323,17.4349,8.2705,28.43c40.7646-18.5149,80.4316-34.1538,118.8213-46.4468' + 'c3.3335-1.0674,6.7344,1.5741,6.4888,5.0657c-3.259,46.3218-32.0598,94.864-70.5176,144.2461' + 'c-22.5637,33.5153-46.5796,61.8207-72.1182,84.6649c-0.8545,0.7643-1.6309,1.5959-2.3268,2.507' + 'c-43.4316,56.8549-85.7373,119.3354-127.1498,186.2732c-34.3597,40.0845-79.2502,64.4323-132.5186,76.2612' + 'c-3.8629,0.8579-7.3875,2.8842-10.0603,5.8019c-52.0673,56.8378-135.7161,96.0234-236.3158,125.7345' + 'c-247.5549,53.913-593.4451,70.9583-959.9009,80.2932C483.7126,1667.6738,322.4524,1641.0632,304.8339,1618.0433z'; var theSwan = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("viewBox","0 0 2270 1720.1041") .attr("transform","translate(180,10)scale(0.18)") .append("path") .classed("swan", true) .attr("d", g_SwanPath); d3.selectAll("input[name=paint-order]") .on("change", function(thing) { theSwan.style("paint-order", this.value); }); //initialize d3.select("#paint-order-stroke").property("checked", true); var value = d3.select('input[name="paint-order"]:checked').property("value"); theSwan.style("paint-order", value); </script></body> https://d3js.org/d3.v4.min.js