Comment ajouter une double bordure aux formes SVG

Disons que quelqu'un vous demande d'ajouter une double bordure à quelques formes SVG géométriques aléatoires. Pour une raison quelconque, vous ne pouvez utiliser aucun éditeur graphique - ils doivent être générés à l'exécution - vous devez donc le résoudre avec CSS ou dans la syntaxe SVG.

Votre première question pourrait être: y a-t-il quelque chose comme le style des AVC: double en SVG? Eh bien, la réponse n'est pas encore et ce n'est pas si simple. Mais je vais quand même essayer de voir quelles méthodes je peux découvrir. Je vais explorer les possibilités de trois formes de base différentes: cercle, rectangle et polygone. Poignant ceux qui peuvent garder une couleur transparente au milieu des deux lignes.

Alerte de spoiler: tous les résultats ont leurs inconvénients, au moins avec CSS et SVG, mais permettez-moi de vous guider à travers mes intentions.

Les solutions simples

Ceux-ci ne fonctionnent pas avec toutes les formes, mais ils sont les plus faciles des solutions.

contour et box-shadow

Les versions CSS et le shadow de la boîte ne s'appliquent qu'à la boîte de délimitation de la forme ou du SVG, et donc les deux sont d'excellentes solutions uniquement pour les carrés et les rectangles . Ils permettent également des couleurs flexibles en utilisant des propriétés personnalisées.

Il ne faut que deux lignes de CSS avec un contour, et il maintient la couleur d'arrière-plan visible à travers la forme.

• ? Solution uniquement pour une seule forme.
• ✅ Code simple
• ✅ Les bordures sont lisses
• ✅ Contexte transparent

Box-Shadow n'a besoin que d'une seule ligne de CSS, mais nous devons nous assurer que chaque forme a son propre SVG car nous ne pouvons pas appliquer Box-Shadow directement sur les formes. Une autre chose à considérer est que nous devons appliquer la couleur de l'arrière-plan de la déclaration.

• ? Solution uniquement pour une seule forme
• ✅ Code simple
• ✅ Les bordures sont lisses
• ? Aucun arrière-plan transparent

Gradients SVG

Les gradients radiaux SVG ne fonctionnent que sur les cercles ☺️. Nous pouvons appliquer directement le gradient sur la course, mais il est préférable d'utiliser des variables car nous devons déclarer les couleurs plusieurs fois dans le code.

• ? Solution uniquement pour une seule forme
• ✅ Code simple
• ? Les bordures sont lisses
• ? Aucun arrière-plan transparent

Solutions pour toutes les formes

Ceux-ci fonctionneront avec toutes les formes, mais le code pourrait devenir gonflé ou complexe.

Filtre: Drop-Shadow ()

Enfin, une solution pour toutes les formes! Nous devons avoir chaque forme dans sa propre

• ✅ Une solution pour toutes les formes
• ✅ Code simple
• ? Les bordures ont l'air pixélisées
• ? Aucun arrière-plan transparent

Filtres SVG

Il s'agit d'une solution très flexible. Nous pouvons créer un filtre et l'ajouter aux formes via l'attribut de filtre de SVG. La partie compliquée ici est le filtre lui-même. Nous aurons besoin de trois peintures, une pour la bordure extérieure, une pour l'inondation de fond et la dernière pour peindre la forme sur le devant. Le résultat semble mieux que d'utiliser Drop Shadow, mais les bordures sont toujours pixelisées.

• ✅ Une solution pour toutes les formes
• ? Code complexe
• ? Les bordures ont l'air pixélisées
• ? Aucun arrière-plan transparent

Formes de réutilisation

Il y a quelques options possibles ici.

Option 1: Transforme

Cette solution nécessite des transformations. Nous plaçons une figure sur l'autre, où la figure principale a une couleur de remplissage et une couleur de course, et l'autre figure n'a pas de remplissage, un coup rouge et est à l'échelle et repositionnée au centre. Nous avons défini nos formes sur les . L'astuce consiste à traduire la moitié de la boîte de vue vers l'espace négatif afin que, lorsque nous les évoluons, nous pouvons le faire depuis le centre de la figure.

• ✅ Une solution pour toutes les formes
• ? Code dupliqué
• ✅ Les bordures sont lisses
• ✅ Contexte transparent

Option 2:

J'ai trouvé une solution intelligente dans la liste de diffusion WWW-SVG par Doug Schepers qui utilise SVG . Encore une fois, cela nécessite de définir les formes une fois et de les référer deux fois à l'aide de . Cette fois, la forme principale a un coup plus important. La deuxième formehashalfthestroke de la forme principale, pas de remplissage et un coup de trait correspondant à la couleur d'arrière-plan.

• ✅ Une solution pour toutes les formes
• ? Code dupliqué
• ✅ Les bordures sont lisses
• ? Aucun arrière-plan transparent

Voici les résultats complets!

Juste pour que vous les ayez tous au même endroit. Faites-moi savoir que vous pouvez penser à d'autres solutions possibles!

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!