javascript - IOS app webview SVG ClipPath Issue

pdf js

Question

Estoy usando d3 v4 para renderizar gráficos SVG. Estoy usando un clipPath en algunos elementos <path> . Tengo un comportamiento de panoramización en un elemento rect y clipPath está ayudando a ocultar algunos de los elementos de ruta. Al hacer un paneo en Android. El clipPath funciona como es necesario, pero cuando se realiza el paneo en iOS, el dibujo se ve funky. Vea abajo:

ANTES DE

DESPUÉS

Implementé el clip SVG con el siguiente código:

   this.line = d3.line()
    .curve(d3.curveMonotoneX)
    .x((d) => this.xScale(this.getDate(d)))
    .y((d) => this.yScale(d.kWh));

this.area = d3.area()
    .curve(d3.curveMonotoneX)
    .x((d) => {
        return this.xScale(this.getDate(d))
    })
    .y0(this.height)
    .y1((d) => this.yScale(d.kWh));

// Definition for clipPath
this.svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", this.width)
    .attr(''transform'', ''translate(0,-20)'')
    .attr("height", this.height + 20);
// clipPath added to area
var areaPath = this.focus.append("path")
    .datum(this.data)
    .attr("class", "area")
    .attr(''height'', this.height)
    .attr(''fill-opacity'', .2)
    .attr(''clip-path'', ''url(#clip)'')
    .attr("d", this.area)
    .attr("transform", "translate(0," + 80 + ")")
    .style("fill", "url(#gradient)");
// clipPath added to the line
var linePath = this.focus.append(''path'')
    .datum(this.data)
    .attr(''class'', ''line'')
    .attr(''fill'', ''none'')
    .attr(''clip-path'', ''url(#clip)'')
    .attr(''stroke'', ''#31B5BB'')
    .attr(''stroke-width'', ''2px'')
    .attr("transform", "translate(0," + 80 + ")")
    .attr(''d'', this.line);

Él es un extracto del zoom que se llama en el zoom.

    private zoomed = () => {

        if (this.isMinZooming) return;

        let diff,
            domain,
            minBuffer,
            maxBuffer,
            t;

        t = d3.event.transform;
        // loose mobile events
        if (isNaN(t.k)) return;

        this.xScale.domain(t.rescaleX(this.x2Scale).domain());
        diff = this.daydiff(this.xScale.domain()[0], this.xScale.domain()[1]);

        // Redraw Axis
        this.xAxis = d3.axisBottom(this.xScale).tickSize(0).tickFormat(d3.timeFormat(''%b''));
        this.focus.select(".axis--x").call(this.xAxis);

        // Redraw Paths. This is where the redraw function gets messy in the iOS webview.
        this.focus.select(".area").attr("d", this.area);
        this.focus.select(''.line'').attr(''d'', this.line);

        ...
}

Alguien ha tenido el mismo problema al usar el clipPath?

Answer 1

Descubrí el problema. Es un error tan súbito. Estaba definiendo un lugar en mi archivo css:

.area{
   clip-path: url(#clip);
}

En todos los navegadores, esto funcionaría para <rect> y <path> , pero para la vista iOS webview el error de visualización anterior.

En lugar de definir esto en un archivo CSS separado, lo definí en línea para todos los SVG Object que quería aplicar como tal:

  var areaPath = this.focus.append("path")
        ...
        .attr(''clip-path'', ''url(#clip)'') //defining it inline

Este error me volvió loco, pero estoy contento de haber encontrado la solución.