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.
Ceux-ci ne fonctionnent pas avec toutes les formes, mais ils sont les plus faciles des solutions.
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.
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.
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.
Ceux-ci fonctionneront avec toutes les formes, mais le code pourrait devenir gonflé ou complexe.
Enfin, une solution pour toutes les formes! Nous devons avoir chaque forme dans sa propre
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.
Il y a quelques options possibles ici.
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
J'ai trouvé une solution intelligente dans la liste de diffusion WWW-SVG par Doug Schepers qui utilise SVG
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!
Application de plateforme de trading Ouyi
Méthode d'implémentation de la fonction de lecture en ligne Python
Que comprend le stockage par cryptage des données ?
Le rôle de la fonction de validation
Récupération de données sur disque SSD
Quelle est la différence entre webstorm et idée ?
Méthode de requête de nom de domaine de deuxième niveau
Quelle est la limite de transfert d'Alipay ?
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
