Bienvenue sur mon compte public : détective front-end
Récemment, j'ai vu un tel problème dans une réflexion: il faut dessiner un diamant avec une taille adaptative, et il y a aussi une bordure, ce qui est généralement très courant dans les organigrammes, et l'effet est le suivant
S'il n'y a pas de bordure, utilisezchemin de clip CSSIl est également très pratique de découper une forme de losange, mais la bordure n'est pas facile à manipuler (généralement, elle est simulée en imbriquant un calque ou une projection, mais l'effet n'est pas très bon. Voici une méthode SVG qui utilise pleinement de la fonction de zoom pour obtenir cet effet
1. D'où vient SVG ?
SVG ne nécessite généralement pas de code manuscrit (à l'exception de quelques formes de base), et peut généralement être généré par un logiciel de conception (SVG est conçu pour les machines au début de la conception, ce qui est très défavorable à la lecture humaine). Par exemple, je dessine ici avec Figma (un polygone fera l'affaire), n'importe quelle taille fera l'affaire
Ensuite, j'ai eu ce SVG
<svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码L'effet dans le navigateur est le suivant
Deuxièmement, les caractéristiques de mise à l'échelle de SVG
Désormais, SVG a une taille par défaut, si vous modifiez manuellement la taille par défaut de SVG, comme suit
A-t- il un effet similaire object-fit:contain? Si vous voulez recouvrir tout le trottoir, que faire de l'étirement forcé ? Ici, vous devez utiliser l'attribut zoom de SVGConserver les proportionsviewBox, indiquant la object-fitrègle à l'échelle lorsque la taille réelle du SVG est incohérente avec la taille, quelque peu similaire à la object-positioncombinaison et . Il existe de nombreuses valeurs ici, la valeur par défaut est xMidYMid , ce qui signifie forcer la mise à l'échelle proportionnelle et l'alignement central.
Si vous êtes intéressé, vous pouvez vous référer à cet article :Comprendre le viewport SVG, viewBox, preserveAspectRatio scaling, le cas est très détaillé
Ici, nous n'avons pas besoin de mise à l'échelle proportionnelle, nous pouvons directement la définir sur aucune
<svg preserveAspectRatio="none">
...
</svg>
复制代码L'effet est le suivant
3. Mise à l'échelle des traits SVG
Après avoir défini la mise à l'échelle inégale, il y a en fait un petit problème avec le trait. Sous différentes tailles, l'épaisseur du trait est différente, comme suit
Existe-t-il un moyen de faire en sorte que le trait ne soit pas mis à l'échelle avec les dimensions SVG? Bien sûr qu'il y en a ! Il y a un attribut en SVGeffet vectorielVous pouvez contrôler le trait pour ne pas zoomer, et toujours garder la taille par défaut. Si vous êtes intéressé, vous pouvez vous référer à cet articleEffet vectoriel CSS et mise à l'échelle des traits SVG, ici il vous suffit d' pathajouter des attributs vector-effect="non-scaling-stroke", indiquant que le trait ne suit pas la mise à l'échelle, comme suit
<svg preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke">...</path>
</svg>
复制代码De cette manière, un diamant de taille adaptative est réalisé et le trait ne sera pas mis à l'échelle.Le code SVG complet est le suivant
<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码Quatrièmement, SVG en ligne base64
Habituellement, un tel graphique convient mieux comme image d'arrière-plan (le code SVG n'a pas l'air bien sur la page). Étonnamment, après la conversion du SVG en base64, les fonctionnalités ci-dessus existent toujours. Ici, nous utilisons M. Zhang XinxuOutil de compression et de fusion SVG en ligne,comme suit
Après la conversion, utilisez simplement cette base64 directement comme arrière-plan
div{
background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}
复制代码De cette manière, un fond de diamant adaptatif est obtenu.
Bien sûr, après la conversion en base64, la couleur ne peut pas être modifiée en temps réel et doit être remplacée dans son ensemble
Le code complet est accessibleSVG diamant
Cinquièmement, pour résumer
À partir de cet exemple, nous pouvons voir les avantages naturels du SVG, en particulier la fonction de zoom du trait. Si vous utilisez CSS pour le dessiner, on estime que vous rencontrerez beaucoup de problèmes. Voici un résumé des points de mise en œuvre :
- SVG est généralement dessiné et exporté via un logiciel de conception, aucune écriture manuscrite n'est requise
- SVG conserve l'échelle d'origine par défaut et les règles de mise à l'échelle peuvent être modifiées via preserveAspectRatio
- L'épaisseur du trait SVG sera mise à l'échelle avec la taille globale par défaut, et la taille d'origine peut être conservée grâce au paramètre d'effet vectoriel
- SVG a toujours les caractéristiques ci-dessus après avoir été converti en base64, et est plus adapté pour être utilisé comme image d'arrière-plan
SVG a toujours été plus avantageux dans le dessin graphique, en particulier pour ces formes géométriques, qui sont plus flexibles dans la mise à l'échelle et adaptatives.Si la mise en œuvre CSS est difficile, envisagez SVG. Enfin, si vous pensez que c'est bon et utile pour vous, veuillez aimer, mettre en signet et transférer ❤❤❤
Bienvenue sur mon compte public : détective front-end