Google 크롬에서 SVG 클립 경로가 올바르게 작동하려면 어떻게해야하나요?

CSS clip-path 속성과 함께 인라인 SVG를 사용하여 div 요소에 경 사진 모서리를 만듭니다.Google 크롬에서 SVG 클립 경로가 올바르게 작동하려면 어떻게해야하나요?

Firefox에서는 경 사진 모서리의 크기가 정확합니다. 그러나 Chrome에서는 비스듬한 모서리의 크기가 부정확하게 작을뿐 아니라 div 요소의 크기도 부정확하게 작아집니다.

Here is the demo on jsFiddle.

Google 크롬을 SVG 및 clip-path과 올바르게 작동하게하려면 어떻게해야하나요?

P. CSS로 생성 된 콘텐츠가 경 사진 코너 효과를 시뮬레이션 할 수 있다는 것을 알고 있습니다. 하지만 제 경우에는 SVG와 clip-path을 사용해야합니다.

출처

2016-08-28 Ian Y.

나는 크롬 https://jsfiddle.net/2p3qywad/1/에서 작동하는 해결책이 있습니다. 이것은 파이어 폭스에서는 작동하지 않습니다. –

@SamDawson 감사합니다. 나는 그 순수한 CSS 방법을 안다. 하지만 Firefox와 Chrome 모두에서 작동하려면 경 사진 모서리가 있어야하며 가장 짧은 코드를 사용하려고합니다. –

크롬에서 정사각형이 오른쪽 및 아래쪽으로 약 10 픽셀 작아 보입니다. 왜 그런지 모르겠습니다. –

this article에서 해결책을 찾았습니다. 이 솔루션은 clipPath 요소에 clipPathUnits="objectBoundingBox"을 추가 한 다음 polygon 요소의 points 특성 값을 백분율 값으로 변경합니다.

Here is the updated demo on jsFiddle.

이전 문제는 Google 크롬이 문서를 참조하는 HTML 요소 대신 클리핑 경로를 문서에 잘못 적용한다는 것입니다. 앞의 기사에 따르면 특성의 값을 objectBoundingBox으로 설정하면 클리핑 경로가이를 참조하는 HTML 요소의 경계를 따르게됩니다.

출처

2016-08-29 01:15:51

이 문제를 해결하는 데 도움이되는 한 가지는 고유 한 클립 경로 ID를 추가하는 것입니다. 이것은 웹킷의 접두사 접두사와 함께 모든 것이 작동하도록 도왔습니다!

Example: 

<svg> 
    (...normal svg stuff...) 

    <clipPath id="uniqueId" transform="translate(-0.01)"> 
     <rect width="90.96" height="78" style="fill: none"/> 
    </clipPath> 

    ...other svg stuff... 

    <g style="clip-path: url(#uniqueId); -webkit-clip-path: url(#uniqueId);"> 

</svg>

이

여러 인라인 svgs을 위해이고 clipPath이 부여 된 어도비 일러스트 레이터 생성 "클립 경로"ID와의 충돌이 있었다한다.

출처

2017-04-19 23:07:19 cblackmon

Google 크롬에서 SVG 클립 경로가 올바르게 작동하려면 어떻게해야하나요?

답변

관련 문제