Drag the various elements to see how things work.
<image>
is clipped with a <clipPath> (both are SVG elements).<clipPath> itself with SVG <use>.<clipPath> references its clipping path with the clip-path SVG attribute.clip-path can be an SVG attribute or a CSS property.<clipPath> and the SVG clip-path attribute.clip-path CSS property is an experimental technology (as of Dec 2016, anyway).| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>clipped</title> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <body> | |
| <form style='position: absolute; top: 10px; left: 500px;'> | |
| <input type="radio" name='choice' value = 'image' checked> image</input></br> | |
| <input type="radio" name='choice' value = 'clone'> clone</input></br> | |
| <input type="radio" name='choice' value = 'rect'> rect</input></br> | |
| <input type="radio" name='choice' value = 'clip'> clipPath</input></br> | |
| <input type="radio" name='choice' value = 'clipped'> clipped image (image & clipPath)</input> | |
| <form/> | |
| <script> | |
| var imgWidth = 466, imgHeight = 609, // PNG dimensions | |
| clipX0 = 50, clipY0 = 40, // upper left corner of the clipped region | |
| clipWidth = imgWidth - clipX0, clipHeight = 200, // dimensions of clipped region | |
| x0 = null, y0 = null, target = null, choice = null, selection = null, | |
| width = 960, height = 500; | |
| var drag = d3.drag() | |
| .on('start', dragstarted) | |
| .on('drag', dragged) | |
| .on('end', dragended); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + "px") | |
| .attr("height", height + "px"); | |
| // Define the SVG clipPath | |
| var clip = svg.append("defs") | |
| .append("clipPath") | |
| .attr("id", "rect-clip") | |
| .append("rect") | |
| .attr("id", "my-rect") | |
| .attr("x", clipX0) | |
| .attr("y", clipY0) | |
| .attr("width", clipWidth) | |
| .attr("height", clipHeight) | |
| .style('stroke', 'black') | |
| .style('stroke-width', '5px') | |
| .style('fill-opacity', 0); | |
| // Render the <rect> in <defs> with a <use> element | |
| var rect = svg.append("use") | |
| .attr("xlink:href", "#my-rect") | |
| .attr("y", 0) | |
| .attr("x", 0) | |
| // Add the image, which is clipped via the clip-path attribute | |
| var image = target = svg.append("image") | |
| .attr("xlink:href", "pooch.png") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", imgWidth + "px") | |
| .attr("height", imgHeight + "px") | |
| .attr("clip-path", "url(#rect-clip)"); | |
| // Translate a cloned image, which is clipped because attributes are cloned too | |
| var clone = svg.append("g") | |
| .attr("transform", "translate( " + 0 + ", " + 210 + ")") | |
| .append(function() { return image.node().cloneNode(true) }); | |
| // Initialize | |
| d3.selectAll('form input').on('change', changed); | |
| changed.call(d3.selectAll('input:checked').node()) | |
| function dragstarted() { | |
| x0 = d3.event.x - (choice === 'clip' ? clipX0 : 0); | |
| y0 = d3.event.y - (choice === 'clip' ? clipY0 : 0); | |
| } | |
| function dragged() { | |
| target.attr("x", d3.event.x - x0).attr("y", d3.event.y - y0); | |
| if (choice === 'clipped') clip.attr("x", d3.event.x - x0 + clipX0).attr("y", d3.event.y - y0 + clipY0); | |
| } | |
| function dragended() { | |
| clip.transition().attr('x', clipX0).attr('y', clipY0); | |
| image.transition().attr('x', 0).attr('y', 0); | |
| clone.transition().attr('x', 0).attr('y', 0); | |
| rect.transition().attr('x', 0).attr('y', 0); | |
| svg.transition().attr('x', 0).attr('y', 0); | |
| } | |
| function changed() { | |
| choice = this.value; | |
| selection = window[choice]; | |
| image.on('.drag', null); | |
| clone.on('.drag', null); | |
| rect.on('.drag', null); | |
| if (choice === 'image' || choice === 'rect') { | |
| svg.insert(function() { return selection.node(); }) | |
| target = selection.call(drag); | |
| } else if (choice === 'clone') { | |
| target = clone.call(drag); | |
| } else if (choice === 'clip') { | |
| svg.insert(function() { return rect.node(); }); | |
| target = clip; // clip won't detect mouse events | |
| rect.call(drag); | |
| } else if (choice === 'clipped') { | |
| target = image.call(drag); | |
| } | |
| } | |
| </script> |
