如何在具有多个路径的 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");

基本上我想完成类似于你使用字母得到的东西，但是使用 lines/paths。


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>的笔画作为剪切路径：

The raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out.

但是，将 <clipPath> 转换为 <mask> 元素会产生我认为是您想要的效果。 Here's a forked CodePen to demonstrate — 路径的笔划设置为 white，并且 <text> 元素也被赋予了 fill 的 white 以匹配剪辑路径效果.

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

How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?

svg

clipping

pathelement

d3.js

clip-path