Как я могу применить clipPath в SVG с несколькими путями и НЕ вырезать область между путями? - PullRequest
Новая
       73

Как я могу применить clipPath в SVG с несколькими путями и НЕ вырезать область между путями?

1 голос
/ 24 апреля 2019

У меня есть 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')

Пожалуйста, помогите!

РЕДАКТИРОВАТЬ: Вот кодекс с обоими примерами.

1 Ответ

2 голосов
/ 25 апреля 2019

Из моего прочтения спецификации SVG невозможно использовать только обводку <path> в качестве пути отсечения:

Необработанная геометрия каждого дочернего элемента , исключая свойства рендеринга, такие как 'fill', 'stroke', 'stroke-width' внутри clipPath, концептуально определяет 1-битную маску (с возможное исключение сглаживания по краю геометрии), которое представляет силуэт графики, связанной с этим элементом. Все, что находится за пределами контура объекта, маскируется.

Тем не менее, преобразование <clipPath> в <mask> элемент дает то, что я считаю желаемым эффектом. Вот раздвоенный CodePen для демонстрации - для обводки путей было установлено значение white, а элементам <text> также было присвоено fill из white, чтобы соответствовать эффекту пути клипа.

...