This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

SVG clip-paths behaving oddly in combination with CSS

  • 1 reply
  • 1 has this problem
  • 1 view
  • Last reply by Shadow110

Shambla
Shambla
more options

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

All Replies (1)

Shadow110
Shadow110
more options

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.

Modified by Shadow110