Avatar for Username

Pesquisar no apoio

Evite burlas no apoio. Nunca iremos solicitar que telefone ou envie uma mensagem de texto para um número de telefone ou que partilhe informações pessoais. Por favor, reporte atividades suspeitas utilizando a opção "Reportar abuso".

Learn More

Esta discussão foi arquivada. Se precisar de ajuda, por favor, coloque uma nova questão.

SVG clip-paths behaving oddly in combination with CSS

  • 1 resposta
  • 1 tem este problema
  • 1 visualização
  • Última resposta por 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.)

Todas as respostas (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.

Modificado por Shadow110 a