Как сделать постепенное заполнение слева направо элемента с fill?

Question

[Владимир Голубь]

Как постепенно запонить элемент слева направо ?

Сейчас задачу решаю с помощью создания множества path, но все равно график растет ступенчато. Единственное решение, что приходит на ум: еще больше разбить участки, может есть способ лучше ?

UPD: изменил, теперь меняю path элемента. Не создаю много разных.

const lineData = [
      {x: 10, y: 10},
      {x: 20, y: 15},
      {x: 30, y: 50},
      {x: 40, y: 80},
      {x: 50, y: 80},
      {x: 60, y: 50},
      {x: 70, y: 90},
      {x: 80, y: 100},
      {x: 90, y: 110},
      {x: 100, y: 120},
      {x: 110, y: 160},
      {x: 120, y: 180},
    ];

    const width = 500;
    const height = 500;
    let current = 0;
    let pathArr = [];

    const svgContainer = d3.select('#graph')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);

    svgContainer.append('line')
      .attr('id', 'line')
      .attr('x1', 0)
      .attr('x2', 0)
      .attr('x2', 500)
      .attr('y2', 0)
      .attr('stroke', 'black');

    svgContainer.append('path')
      .attr('id', 'path')
      .attr('fill', 'red');


    const lineFunction = d3.line().context(null)
      .x(function (d) { return d.x })
      .y(function (d) { return d.y });

    setTimeout(lineGraph, 100);

    function lineGraph() {
      if (current < lineData.length - 1) {
        pathArr = [
          ...pathArr,
          {x: lineData[current].x, y: 0},
          lineData[current],
          lineData[current + 1],
          {x: lineData[current + 1].x, y: 0}
        ];

        d3.select('path')
          .attr('d', lineFunction(pathArr));

        current++;

        setTimeout(lineGraph, 100);
      }

      d3.select('#line')
        .attr('transform', `translate(0, ${ lineData[current].y })`);
    }

Answer 1

[Максим Морев]

Clip-path, равный элементу (оранжевым выделил, как должно выглядеть), другой заведомо гораздо больший элемент (которым будете заполнять) получает атрибут clip-path, который получает идентификатор созданного в первом шаге (синим показал, как должно выглядеть).
Со вторым элементом делаете что хотите, как угодно трансформируете - он рисуется только в указанной области (а область у нас равна элементу, графику или что там у вас).

Comments

[Владимир Голубь]

можно ли анимировать постепенное заполнение ?

[Максим Морев]

Владимир Голубь, ещё раз:

Со вторым элементом делаете что хотите, как угодно трансформируете - он рисуется только в указанной области (а область у нас равна элементу, графику или что там у вас).

Допустим, размер второго элемента у вас равен первому. Тогда для заполнения слева направо вам всего и нужно, что установить изначально второму элементу translateX(-100%) и в конце анимации translateX(0%).