![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
SVG clip-paths behaving oddly in combination with CSS
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)
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于