A simple example illustrating the css paint-order property.
Last active
July 17, 2016 01:45
-
-
Save nowherenearithaca/9038297e108528462a5d5c290b957c54 to your computer and use it in GitHub Desktop.
css "paint-order" example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<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="http://www.w3.org/2000/svg" xmlns:xlink="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment