O círculo SVG deve se adaptar à altura da grade CSS sem sobrepor

No exemplo a seguir, o círculo se adapta à largura da grade e mantém sua proporção. À medida que a largura do recipiente diminui, os círculos diminuem com ele ...

Porém, quando a altura é menor que a largura (segunda caixa), o círculo não diminui as sobreposições fora da grade. Existe uma maneira de adaptá-lo à altura, mantendo a proporção?

.container {
	display: grid;
	background-color: greenyellow;
	margin: 5px;
	min-height: 10px;
	min-width: 10px;
}

.portrait {
		max-height: 100px;
		max-width: 200px;
}

.landscape {
		max-height: 200px;
		max-width: 100px;
}

.aspect-ratio {
	grid-column: 1;
	grid-row: 1;
	background-color: deeppink;
	border-radius: 50%;
 align-self: center;
	justify-self: center;
}

<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

Expandir snippet

O resultado deve ficar assim:

— Th3S4mur41
fonte

Você tem a possibilidade de editar o código svg?

— thetont 21/01

Respostas:

Depois de mexer algum tempo com esse problema, percebi que isso não é um problema com o layout da grade.

Como você nunca define altura / altura máxima ou largura / largura máxima para o seu SVG, o que está sendo calculado é width:autoeheight:auto

Nota: Eu trago max-height / max-width, pois eles teriam prioridade sobre os valores de largura / altura .

Agora, por que o layout da paisagem funciona e o retrato não funciona? Porque a largura está "priorizando" sua altura.

E é por isso que, no layout do bloco, uma altura automática é baseada na altura total dos descendentes e uma largura automática é baseada na largura do bloco que o contém.

Fonte - Por que width: auto se comporta de maneira diferente de height: auto?

Isso significa que seu SVG está retirando o widthcontêiner e os heightdescendentes.

No seu exemplo, seu SVG não tem descendentes, mas tem um pai com uma largura máxima definida . Mas o que isso significa para a altura do SVG ?

O SVG está calculando sua altura através da razão intrísica:

Se a 'viewBox' no elemento 'svg' estiver especificada corretamente:

deixe viewbox ser a viewbox definida pelo atributo 'viewBox' no elemento 'svg'

retornar viewbox.width / viewbox.height

Fonte

E sua proporção intrísica é 1/1 = 1

Então você está forçando sua height=width

As soluções)

A solução está configurando a widthou a marginpara o seu SVG, dependendo da proporção da sua div principal.

No exemplo que você deu, você tem uma proporção de 2: 1, então seu SVG deve ter width:50%ou margin: 0 25%.

Isso significa que, se você deseja definir uma proporção diferente, deve ajustar em conformidade (veja retrato-1-3 no código abaixo).

A definição de uma regra CSS para cada proporção pode ser evitada se heightnão houver uma restrição, pois você pode definir a widthpara o SVG e o contêiner, permitindo que os elementos ajustem heightpara manter a proporção.

Também adicionei o exemplo final, se alguém não se preocupa em manter a proporção, mas precisa conter o SVG em um conjunto heighte em um widthcontêiner.

.container {
  display: grid;
  background-color: greenyellow;
  margin: 5px;
  min-height: 10px;
  min-width: 10px;
}

.portrait {
  max-height: 100px;
  max-width: 200px;
}


/* Add 25% margin left and right to center the image  OR set the image width to 50% */

.portrait>.aspect-ratio {
  margin: 0 25%;
  /*
    or 
    
    width:50%;
  */
}

.landscape {
  max-height: 200px;
  max-width: 100px;
}

.aspect-ratio {
  grid-column: 1;
  grid-row: 1;
  background-color: deeppink;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
}


/* Set fixed max-height and max-width rule (33% proportion)  */

.portrait-1-3 {
  max-height: 100px;
  max-width: 300px;
}


/* Align image with the new proportion */

.portrait-1-3>.aspect-ratio {
  margin: 0 33.33%;
  /*
    or 
    
    width:33.3%;
  */
}


/* Removed max-height and let the container adjust the height according to the max-width rule and the proportion set  */

.portrait-any-height {
  max-width: 400px;
}


/* Height will be adjusted through the width/margin defined here, so 10% width will correspond to 40px of height (10%*400px)*(aspect ratio=1)*/

.portrait-any-height>.aspect-ratio {
   width:10%;
}


/* Set fixed max-height and max-width rule (proportion doesn't matter)  */

.portrait-squeezed {
  max-height: 100px;
  max-width: 300px;
}


/* Make sure SVG complies with the the given max with and height (squeezing your svg)  */

.portrait-squeezed>.aspect-ratio {
  max-height: inherit;
  max-width: inherit;
}

<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait-1-3">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait-any-height">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait-squeezed">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

Expandir snippet

Note que eu não sou muito proficiente trabalhando com SVGs e essa resposta é resultado de pesquisas e muita experimentação! Ficaria feliz em receber quaisquer ajustes e / ou correções na minha resposta.

— H. Figueiredo
fonte

Obrigado pela explicação detalhada ... Devo notar que sua pesquisa infelizmente retornou os mesmos resultados que os meus. Parece não haver solução para meus requisitos: 1. A taxa de proporção SVG é fixa. 2. a proporção de aspecto do contêiner é variável / desconhecida 3. o tamanho do contêiner é limitado por altura e largura, dependendo do ambiente (por exemplo, tamanho da janela do navegador) A solução proposta, configurando a largura do SVG para uma determinada porcentagem do contêiner, funcionaria se o contêiner tinha proporção fixa, mas não.

— Th3S4mur41

Desistir da altura máxima também não funciona, isso significaria apenas mover a questão do estouro para o pai

— Th3S4mur41

Com esses três requisitos, parece que não há uma solução, ou seja, usando apenas CSS. Está usando Javascript para calcular a largura apropriada de SVG fora de questão?

— H. Figueiredo

É isso que minha solução atual está fazendo, que eu gostaria de evitar;)

— Th3S4mur41

Espero que a proporção ajude a resolver isso, mas não tenho certeza disso. drafts.csswg.org/css-sizing-4/#aspect-ratio

— Th3S4mur41

Adicione ao recipiente altura e largura específicas ao lado de altura e largura máx.

as unidades vw e vh podem ser usadas para tornar esse layout mais flexível.

  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;

Dessa forma, é possível definir max-width: 100%; max-height: 100%;o svg e ele não se sobrepõe.

-EDITAR-

Como a caixa de exibição svg já é renderizada com a proporção correta, é seguro mover o fundo svg dentro do próprio svg para obter o resultado esperado: uma tag cicle fará o truque.

É possível imitar o raio da borda com outra marca de círculo dentro de uma máscara

Todos os outros elementos do svg devem ser colocados dentro de um grupo mascarado. ou seja:<g mask="url(#mask)">

.container {
  display: grid;
  background-color: greenyellow;
  margin: 5px;
  min-height: 10px;
  min-width: 10px;
}

.portrait {
  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;
}

.landscape {
  max-height: 200px;
  max-width: 100px;
  width: 100vw;
  height: 100vh;
}

.aspect-ratio {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
}

.aspect-ratio .bkg{
  fill: deeppink;
}

<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1">
    <mask id="mask">
      <circle cx=".5" cy=".5" r=".5" fill="#fff"/>
    </mask>
    <circle cx=".5" cy=".5" r=".5" class="bkg"/>
    <g  mask="url(#mask)">

    </g>
  </svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio"viewBox="0 0 1 1">
    <mask id="mask">
      <circle cx=".5" cy=".5" r=".5" fill="#fff"/>
    </mask>
    <circle cx=".5" cy=".5" r=".5" class="bkg"/>
    <g  mask="url(#mask)">

    </g>
  </svg>
</div>

Expandir snippet

— thetont
fonte

A pergunta especificada "Existe uma maneira de adaptá-la à altura, mantendo a proporção", que o seu exemplo não. É uma maneira de forçar o SVG para dentro do contêiner, mas não produzirá o resultado pretendido. É o mesmo que o último exemplo da minha resposta em que o svg é compactado para caber no contêiner

— H. Figueiredo

A explicação pode ser um pouco confusa, mas com a solução sugerida, a altura do svg se adapta à altura do contêiner.

— thetont 21/01

Mas não mantém a proporção SVG ! Você viu o resultado desejado que o OP postou?

— H. Figueiredo

Oh, uau ... Acabei de verificar com o Chrome e agora entendo o que você está dizendo. Eu o codifiquei no Firefox e, com esse navegador, funciona como pretendido, não esperava que o resultado fosse tão diferente. My bad

— thetont

Na verdade, esse é um comportamento bastante interessante, acho que o Firefox e o Chrome calculam de maneira diferente para 100%? Enfim, todos cometemos erros, caso contrário, o SO não existiria: D

— H. Figueiredo