如何在具有多个路径的SVG中应用clipPath并且不剪切路径之间的区域？

Question

我有一个由多个路径元素组成的SVG clipPath，我需要将其应用于一组元素。我只想剪掉路径笔划下面的区域，而不是路径之间。 （不做我想要的例子如下）

var lineData = [ { "x": 1,   "y": 5},  { "x": 100,  "y": 400},
                  { "x": 300,  "y": 100}, { "x": 600,  "y": 600}, 
                  { "x": 700, "y": 50} ];
var lineData2 = [ { "x": 1,   "y": 500},  { "x": 100,  "y": 100},
                  { "x": 300,  "y": 700}, { "x": 600,  "y": 60},
                  { "x": 700,   "y": 700} ]; 


var lineFunction = d3.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .curve(d3.curveBundle);

var svg = d3.select('body')
    .append('svg')
    .attr('id', 'svg')
    .attr('width', 660)
    .attr('height', 660)
    .style('outline', '1px solid red')
    .append('g')
    .attr('clip-path', 'url(#clippy)');

var polygon = svg.append('polygon')
    .attr('points', '230 10, 660 330, 230 650')
    .attr('fill', '#c99');

var circle = svg.append('circle')
    .attr('cx', 230)
    .attr('cy', 330)
    .attr('r', 200)
    .attr('fill', '#9c6')

var clippy = d3.select('#svg')
    .append('defs')
    .append('clipPath')
    .attr('id', 'clippy');

clippy.append("path")
    .attr("d", lineFunction(lineData))
    .attr("stroke", "blue")
    .attr("stroke-width", 18)
    .attr("fill", "none");

clippy.append("path")
    .attr("d", lineFunction(lineData2))
    .attr("stroke", "blue")
    .attr("stroke-width", 18)
    .attr("fill", "none");

基本上我想要完成类似于使用字母获得的东西，而是使用线/路径。

var lineData = [ { "x": 1,   "y": 5},  { "x": 100,  "y": 400},
                  { "x": 300,  "y": 100}, { "x": 600,  "y": 600}, 
                  { "x": 700, "y": 50} ];
var lineData2 = [ { "x": 1,   "y": 500},  { "x": 100,  "y": 100},
                  { "x": 300,  "y": 700}, { "x": 600,  "y": 60},
                  { "x": 700,   "y": 700} ]; 


var lineFunction = d3.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .curve(d3.curveBundle);

var svg = d3.select('body')
    .append('svg')
    .attr('id', 'svg')
    .attr('width', 660)
    .attr('height', 660)
    .style('outline', '1px solid red')
    .append('g')
    .attr('clip-path', 'url(#clippy)');

var polygon = svg.append('polygon')
    .attr('points', '230 10, 660 330, 230 650')
    .attr('fill', '#c99');

var circle = svg.append('circle')
    .attr('cx', 230)
    .attr('cy', 330)
    .attr('r', 200)
    .attr('fill', '#9c6')

var clippy = d3.select('#svg')
    .append('defs')
    .append('clipPath')
    .attr('id', 'clippy');

clippy.append('text')
    .attr('x', 120)
    .attr('y', 320)
    .attr('font-size', '4em')
    .attr('font-weight', 'bold')
    .attr('font-family', 'Georgia')
    .text('This is a clip');

clippy.append('text')
    .attr('x', 120)
    .attr('y', 420)
    .attr('font-size', '4em')
    .attr('font-weight', 'bold')
    .attr('font-family', 'Georgia')
    .text('Also a clip')

请帮忙！

编辑：Here's a Codepen两个例子。

Answer 1

从我对SVG spec的阅读中，不可能仅使用<path>的笔划作为剪切路径：

每个子元素的原始几何体（不包括“clipPath”中的'fill'，'stroke'，'stroke-width'等渲染属性在概念上定义了1位掩码（可能除了沿边缘的抗锯齿外）几何图形）表示与该元素相关联的图形的轮廓。对象轮廓之外的任何东西都被掩盖了。

然而，将<clipPath>转换为<mask>元素会产生我认为你想要的效果。 Here's a forked CodePen to demonstrate - 路径的行程设置为white，而<text>元素也被赋予fill的white以匹配剪辑路径效果。