如何在具有多个路径的 SVG 中应用 clipPath，而不是剪掉路径之间的区域？答案

【问题标题】：How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?如何在具有多个路径的 SVG 中应用 clipPath，而不是剪掉路径之间的区域？
【发布时间】：2019-09-14 03:30:38
【问题描述】：

我有一个由多个路径元素组成的 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 两个例子。

【问题讨论】：

标签： d3.js svg clipping clip-path pathelement

【解决方案1】：

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

每个子元素的原始几何不包括渲染属性，例如“clipPath”中的“fill”、“stroke”、“stroke-width”，概念上定义了一个 1 位掩码（使用沿几何体边缘的抗锯齿可能的例外）表示与该元素关联的图形的轮廓。对象轮廓之外的任何内容都会被遮盖。

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

【讨论】：