Join us to show up for other Firefox users 🦊. Earn fun badges and Mozilla swag vouchers! Find out more: https://mzl.la/askafox150

Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

Avatar for Username

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

이 쓰레드는 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

SVG clip-paths behaving oddly in combination with CSS

  • 1 답장
  • 1 이 문제를 만남
  • 48 보기
  • 최종 답변자: Shadow110
  • 보존

Shambla
Shambla

Our team came across an SVG clip-path issue based on a component within our web application.

Here is a simplified example: https://jsfiddle.net/dzs6jcgr/6/

I have set up a clip rectangle set to the same bounds as the visible gray rectangle.

Expected Behavior: The blue circle should be chopped in half, while the red circle should be rendered fully since it is within the clip rectangle

Actual Behavior: The blue circle is chopped in half and the red circle's lower right section is also chopped.

Notes:

The expected behavior is present in Chrome as well as modern Firefox versions prior to 58.

It appears the parent group element is not resized to account for any transforms (scale, translate, etc.)

Our team came across an SVG clip-path issue based on a component within our web application. Here is a simplified example: https://jsfiddle.net/dzs6jcgr/6/ I have set up a clip rectangle set to the same bounds as the visible gray rectangle. Expected Behavior: The blue circle should be chopped in half, while the red circle should be rendered fully since it is within the clip rectangle Actual Behavior: The blue circle is chopped in half and the red circle's lower right section is also chopped. Notes: The expected behavior is present in Chrome as well as modern Firefox versions prior to 58. It appears the parent group element is not resized to account for any transforms (scale, translate, etc.)

모든 댓글 (1)

Shadow110
Shadow110

Hi, Firefox is not as forgiving with coding errors as other browsers are. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. W3C.org Who make the rules for web code. Check your code. HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

HTML Errors - https://validator.w3.org/nu/?doc=https%3A%2F%2Fjsfiddle.net%2Fdzs6jcgr%2F6%2F CSS - perfect.

Hi, and yes figured out it was not your page that had the HTML errors in it. It was looking at the sites.

The box your trying to fill is bigger than the numbers you have set out for it. I would think that then holds true for circle.

Am sure someone will take a look at this further.

글쓴이 Shadow110 수정일시