Comment puis-je appliquer des dégradés linéaires aux rectangles SVG ?

Application de dégradés linéaires aux éléments SVG

Dans le domaine de la conception SVG, vous pourriez rencontrer le besoin d'améliorer vos graphiques avec des dégradés visuellement attrayants . Cet article vous guidera tout au long du processus d'application de dégradés linéaires aux éléments SVG, en se concentrant spécifiquement sur les rectangles.

En CSS, l'attribut "fill" vous permet d'attribuer une couleur unie aux éléments SVG comme les rectangles. Cependant, pour obtenir un effet de dégradé, vous pouvez exploiter la puissance des dégradés linéaires.

Pour définir un dégradé linéaire dans votre SVG, utilisez l'option "". élément. Spécifiez l'ID du dégradé et son orientation. Dans cet élément, créez plusieurs éléments « stop » pour définir la couleur et la position de chaque point le long du dégradé.

Ensuite, reportez-vous à l'ID de dégradé défini dans l'attribut CSS « ​​fill » de l'élément rectangle. Au lieu d'utiliser une couleur unie, spécifiez "url(#GradientID)", en remplaçant "GradientID" par l'ID réel défini dans votre SVG.

Par exemple :

<code class="css">rect {
    ...
    fill: url(#MyGradient);
}</code>

Dans le HTML partie de votre SVG, assurez-vous que le dégradé "MyGradient" est correctement déclaré dans le champ "". section, comme indiqué ci-dessous :

<code class="html"><svg ...>
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>
  <rect ... />
</svg></code>

La mise en œuvre de ces étapes appliquera efficacement un dégradé linéaire personnalisable à votre élément rectangle SVG, améliorant ainsi son attrait visuel et ajoutant de la profondeur à vos conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!