如何在具有多个路径的 SVG 中应用剪辑路径，而不是剪裁路径之间的区域

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')

请帮忙！

编辑：这是一个包含两个示例的代码笔。

Answer 1

根据我对 SVG 规范的阅读，不可能仅使用 <path> 的笔画作为剪切路径：

每个子元素的原始几何图形(不包括"clipPath"中的"填充"、"描边"、"笔触宽度"(等呈现属性，在概念上定义了一个 1 位掩码(沿几何图形边缘的抗锯齿可能除外(，它表示与该元素关联的图形的轮廓。对象轮廓之外的任何内容都会被遮盖。

但是，将<clipPath>转换为<mask>元素会产生我认为您想要的效果。这里有一个分叉的CodePen来演示 - 路径的笔触设置为white，并且<text>元素也被赋予了white fill以匹配剪辑路径效果。