Avatar for Username

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信，及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

话题已存档。 如果需要帮助请提出新问题。

SVG clip-paths behaving oddly in combination with CSS

  • 1 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 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.)

所有回复 (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.

由Shadow110于修改