IOS uygulaması webview SVG ClipPath Issue

Question

SVG grafiklerini işlemek için kullanıyorum. Birkaç <path> öğesinde clipPath kullanıyorum. Bir rect öğesinde kaydırma davranışı var ve clipPath bazı yol öğelerini gizlemeye yardımcı oluyor. Android'de gezinirken. ClipPath gerektiği gibi çalışır, ancak iOS'ta kaydırma yaparken çizimde funky oluşturulur. Aşağıya bakın:

Aşağıdaki kod ile SVG klibi uyguladık

SONRA ÖNCE:

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

O çok iy olan zoom denen zumdan rpts.

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

     ... 
} 

clipPath'i kullanırken aynı sorunu olanlar var mıydı?

Answer 1

Sorunu çözdüm. Bu bir kaçık böceği.

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

tüm tarayıcılarda bu <rect> ve <path> için çalışacak, ama iOS webview için yukarıdaki ekran hatası kılabilecek: Benim css dosyasında bir yerde tanımlayarak edildi.

, ben gibi uygulamak istediğini tüm SVG Object için satır içine tanımlanmış yerine ayrı CSS dosyada bu tanımlama:

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

Bu hata beni deli ama ben memnunum ve çözümü buldu.