css "paint-order" example

A simple example illustrating the css paint-order property.

<!DOCTYPE html>
	<meta charset="utf-8">

<head>

.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>

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