使用现有对象作为剪切路径的简单方法？ [英] Simple way to use existing object as a clipping path?
问题描述
我有以下简单的例子，当线延伸到矩形外，我想剪辑它。我已经有矩形用作轮廓，什么是一个简单的方法到相同的矩形作为剪切路径？我当前使用 id 的方法被忽略。此相关的问题有一个答案，但它需要创建剪辑区域。我想重复使用我的信息，而不是重复几乎相同的信息。
I have the following simple example, When the line extends outside the rectangle, I want to clip it. I already have the rectangle used as an outline, what is a simple way to the same rectangle as a clipping path? My current approach using id is ignored. This related question has an answer but it requires creating the clip area separately. I'd like to re-use my info rather than repeat nearly the same info.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src = "http://d3js.org/d3.v3.min.js"> </script>
<script>
var margin = {top: 100, right: 20, bottom: 20, left: 20},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var xdata = d3.range(0, 20);
var ydata = [1, 4, 5, 9, 10, 14, 15, 15, 11, 10, 5, 5, 4, 8, 7, 5, 5, 5, 8, 10];
var xy = []; // start empty, add each element one at a time
for(var i = 0; i < xdata.length; i++ ) {
xy.push({x: xdata[i], y: ydata[i]});
}
var xscl = d3.scale.linear()
.domain(d3.extent(xy, function(d) {return d.x;})) //use just the x part
.range([margin.left, width + margin.left])
var yscl = d3.scale.linear()
.domain([1, 8]) // use just the y part
.range([height + margin.top, margin.top])
var slice = d3.svg.line()
.x(function(d) { return xscl(d.x);}) // apply the x scale to the x data
.y(function(d) { return yscl(d.y);}) // apply the y scale to the y data
var svg = d3.select("body")
.append("svg")
svg.append('rect') // outline for reference
.attr({x: margin.left, y: margin.top,
width: width,
height: height,
id: "xSliceBox",
stroke: 'black',
'stroke-width': 0.5,
fill:'white'});
svg.append("path")
.attr("class", "line")
.attr("d", slice(xy))
.attr("clip-path", "#xSliceBox")
.style("fill", "none")
.style("stroke", "red")
.style("stroke-width", 2);
</script>
</body>
推荐答案
code> clip-path 属性，您需要创建一个< clipPath> 元素。然后，在< clipPath> 元素中，您可以使用< use> 元素引用矩形。
You can't reference the rectangle directly in the clip-path property, you need to create a <clipPath> element. Then, inside the <clipPath> element, you can use a <use> element to reference the rectangle.
（是的，它是周到的，更复杂，你会认为它应该是，但这是SVG规范定义它。）
(Yes, it's round-about and more complicated that you would think it should be, but that's how the SVG specs defined it.)
使用您的代码：
var svg = d3.select("body")
.append("svg")
var clip = svg.append("defs").append("clipPath")
.attr("id", "clipBox");
svg.append('rect') // outline for reference
.attr({x: margin.left, y: margin.top,
width: width,
height: height,
id: "xSliceBox",
stroke: 'black',
'stroke-width': 0.5,
fill:'white'});
clip.append("use").attr("xlink:href", "#xSliceBox");
svg.append("path")
.attr("class", "line")
.attr("d", slice(xy))
.attr("clip-path", "url(#clipBox)") //CORRECTION
.style("fill", "none")
.style("stroke", "red")
.style("stroke-width", 2);
你也可以这样做， clipPath 元素，然后使用< use> 元素将其实际绘制到屏幕。不管怎样，你只想定义矩形一次，所以如果你决定改变它，你只需要在一个地方做，另一个会更新匹配。
You could also do this the other way around, defining the rectangle within the clipPath element and then using a <use> element to actually draw it to the screen. Either way, you want to only define the rectangle once, so that if you decide to change it you only have to do it in one place and the other will update to match.
这篇关于使用现有对象作为剪切路径的简单方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
