Dev Faq
0
votes

Comment faire des carrés svg sensibles?

Comment rendre ces patériares être réactivant par l'élément parent?

p> 

   <svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect height="50" width="50" y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="0" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

4 commentaires

Vous voulez dire qu'ils peuvent être déformés en fonction de la largeur / de la hauteur?

Oui, je veux définir:

...

Pourquoi ne pas utiliser CSS? c'est plus facile

Oui, mais je dois faire dans SVG .. comme logo

3 Réponses :

0
votes

Vous pouvez obtenir la même chose à l'aide de CSS et d'arrière-plan, il sera facile de modifier la taille:

p> 

<svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

<svg style="width: 200px; height: 200px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

1 commentaires

Ceci n'est pas réactif. Le code que vous avez fourni est défini.

1
votes

Vous devez utiliser la VIEOWBOX sur "0 0 100 100" .

SOUND SVG

Ici la solution: xxx

0 commentaires
-2
votes

Si vous aimez créer un élément réactif, il y a une très bonne tour. Vous pouvez l'adapter à n'importe quel rapport que vous souhaitez avec Padding-top: 100%; code> Vous obtenez un rapport 1: 1.

p> 

<div class="ratio">
  <div class="box"></div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components