1

Estou tendo dificuldades para diminuir o tamanho da estrela no meu sistema, já tentei tirar o width e height do elemento svg, já tentei também colocar o 'viewbox', e até agora não obtive nenhum resultado, estou sem ideias k

<?php  if($nota == 5) {?> 
<svg xmlns="http://www.w3.org/2000/svg viewbox="2 2 0 40">
    <polygon points="100,10 40,198 190,78 10,78 160,198"  fill="black" style="fill:yellow"/>
</svg>
<?php } 
?>

inserir a descrição da imagem aqui

0

2 Respostas 2

4

Na verdade tem uma aspas faltando na sua tag SVG, mas não é só esse o problema, as medidas do seu viewbox está bem estranha considerando os valores dos pontos do polígono. Além do mais, se o terceiro ou o quarto valor do viewbox for 0 o canvas do svg não vai ter "espaço" para renderizar o elemento

Eu ajustei o fechamento das aspas e coloquei o viewbox do tamanho dos maiores lados 198 e resolveu. Vc pode usar a largura:altura do tamanho que quiser, desde que mantenha a proporção 1:1 para não ficar com "espaço vazio" dentro do canvas do svg. Então tente manter tipo 100px de altura e largura, ou 120px etc...

svg {
    width: 198px;
    height: 198px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="2 2 198 198">
    <polygon points="100,10 40,198 190,78 10,78 160,198"  fill="black" style="fill:yellow"/>
</svg>

3

Primeiro você precisa definir as dimensões da área do SVG que você deseja. Como a figura é representada por um quadrado, suponhamos que você deseja uma estrela com 100x100 pixels. Então defina o width e o height em 100px:

CSS:

svg{
   width: 100px;
   height: 100px;
}

Agora você precisa definir as coordenadas dentro dessa área (para a estrela, são 5 coordenadas), separadas por vírgula sendo x,y (x é o eixo horizontal e y o eixo vertical) nos vértices indicados abaixo:

inserir a descrição da imagem aqui

Como SVG tem 100x100 pixels de dimensão, os valores da figura acima são as porcentagens aproximadas para se construir uma estrela perfeita, ou seja:

1º vértice: x = 50%, y = 0%
2º vértice: x = 19,49%, y = 100%
3º vértice: x = 100%, y = 37,93%
4º vértice: x = 0%, y = 37,93%
5º vértice: x = 80,51%, y = 100%

Exemplo:

svg{
   width: 100px;
   height: 100px;
}
<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,0 19.49,100 100,37.93 0,37.93 80.51,100"  fill="black" style="fill:yellow"/>
</svg>

Dependendo do tamanho da estrela que você quer, basta aplicar as porcentagens proporcionalmente nas coordenadas de acordo com as dimensões do quadrado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .