IOS app webview SVG ClipPath 문제

나는 d3 v4을 사용하여 SVG 그래픽을 렌더링하고 있습니다. 일부 <path> 요소에 clipPath을 사용하고 있습니다. rect 요소에서 동작을 패닝하고 clipPath는 일부 경로 요소를 숨기는 데 도움이됩니다. 안드로이드에서 패닝 할 때. clipPath는 필요에 따라 작동하지만 iOS에서 패닝하면 그림이 펑키하게 렌더링됩니다. 아래를 참조IOS app webview SVG ClipPath 문제

나는 다음과 같은 코드로 SVG 클립을 구현했습니다

AFTER하기 전에 :

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

그는 exce 있습니다 줌에서 호출 된 줌의 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를 사용할 때 누구도 동일한 문제가 있습니까?

출처

2016-12-12 inspired

나는 이것이 clipPath와 클리핑하는 요소가 동일한 좌표계에서 정의되지 않았기 때문에 동일한 변형이 적용되지 않는다고 말할 수 있습니다. http://stackoverflow.com/a/38088473/1160916 – Ashitaka

@Ashitaka IOS가 아닌 모든 브라우저에서이 기능이 작동하는 이유는 무엇입니까? 그것은 사파리에서도 작동합니다. 왜 그런지 알고 있니? – inspired

문제점을 파악했습니다. 그것은 그런 suddle 버그입니다.

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

모든 브라우저에서이 <rect> 및 <path>을 위해 일 것이다, 그러나 iOS webview 것은 위의 디스플레이 오류를 렌더링 것 : 내 CSS 파일의 어딘가에 정의했다.

, 나는 같은에 적용하고 싶었 모든 SVG Object 인라인을 정의하는 대신 별도의 CSS 파일이 정의 :

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

이 버그가 나를 미치게 몰고,하지만 난 '다행이야 솔루션을 찾았습니다.

출처

2017-02-02 18:34:03 inspired

IOS app webview SVG ClipPath 문제

답변

관련 문제