SVG rectangle

SVG Formes

SVG a quelques éléments de forme prédéfinies, peuvent être utilisés par les développeurs à utiliser et à exploiter:

• Rectangle <rect>
• Round <cercle>
• Oval <ellipse>
• Ligne <ligne>
• Polyline <polyligne>
• Polygon <polygon>
• Chemin <path>

Les sections suivantes vous expliqueront ces éléments, à partir d'un élément rectangulaire.

SVG rectangle - <rect>

exemple 1

<Rect> est utilisée pour créer un rectangle, et une variante rectangulaire:

Voici le code SVG:

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

Analyse de code:

• la largeur et la hauteur des éléments d'attributs rect définissent la hauteur et la largeur du rectangle,
• propriété de style est utilisée pour définir les propriétés CSS
• la propriété CSS de remplissage définit le rectangle couleur de remplissage (valeurs rgb, nom de la couleur ou de la valeur hexadécimale)
• Largeur de la propriété stroke-width CSS définit la frontière rectangulaire
• La propriété couleur de contour CSS définit la frontière rectangulaire

exemple 2

Regardons un autre exemple, il contient un certain nombre de nouvelles propriétés:

Voici le code SVG:

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

Analyse de code:

• X attribut définit la position gauche du rectangle (par exemple, x = "0" pour définir le rectangle sur le côté gauche de la fenêtre du navigateur, la distance est 0px)
• Haut attribut position y définit le rectangle (par exemple, y = "0" de la définition du rectangle vers le haut de la fenêtre du navigateur est 0px)
• la propriété de remplissage d'opacité CSS définit la transparence de la couleur de remplissage (plage juridique: 0 à -1)
• La propriété CSS stroke-opacity définit la transparence de la couleur de course (intervalle légal: 0 à -1)

exemple 3

Définir l'opacité de l'élément entier:

Voici le code SVG:

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

• la propriété CSS d'opacité définit la valeur de l'élément transparent (plage: 0-1).

exemple 4

Le dernier exemple, créer un rectangle arrondi:

Voici le code SVG:

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

• rx et ry attributs peuvent générer un rectangle arrondi.