Ứng dụng webview cho iOS SVG ClipPath Issue

Question

Tôi đang sử dụng d3 v4 để hiển thị đồ họa SVG. Tôi đang sử dụng một clipPath trên một vài yếu tố <path>. Tôi có hành vi panning trên một phần tử rect và clipPath đang giúp ẩn một số phần tử đường dẫn. Khi lướt qua trong android. ClipPath hoạt động khi cần thiết, nhưng khi panning trong iOS bản vẽ được render sôi nổi. Xem dưới đây:

TRƯỚC

SAU

Tôi đã thực hiện clip SVG với đoạn mã sau:

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); 

Ông là exce rpts từ zoom được gọi là 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); 

     ... 
} 

Có ai có cùng vấn đề khi sử dụng clipPath không?

Answer 1

Tôi đã tìm ra sự cố. Đó là một lỗi suddle. Tôi đã xác định ở đâu đó trong file css của tôi:

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

Trong tất cả các trình duyệt này sẽ làm việc cho <rect> và <path>, nhưng đối với iOS webview nó sẽ làm cho các lỗi hiển thị trên.

Thay vì quy định này trong một tệp riêng CSS, tôi định nghĩa nó inline cho tất cả SVG Object mà tôi muốn áp dụng nó vào như vậy:

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

Lỗi này lái xe cho tôi điên, nhưng tôi vui mừng tôi đã tìm ra giải pháp.