Vous amène à comprendre HTML5 SVG et à voir comment dessiner un diamant adaptatif

Cet article vous amènera à comprendre le SVG, à comprendre les caractéristiques des éléments SVG HTML5 et à présenter la méthode d'utilisation du SVG pour dessiner des diamants adaptatifs. Vous n'aurez peut-être pas besoin d'images png. J'espère que cela sera utile à tout le monde !

J'ai récemment vu un tel problème dans certaines réflexions : je dois dessiner un losange de taille adaptative avec une bordure, ce qui est généralement très courant dans les organigrammes. L'effet est le suivant

S'il n'y en a pas. border, utilisez CSS clip-path peut également facilement découper une forme de losange, mais la bordure n'est pas facile à manipuler (généralement simulée par l'imbrication d'un calque ou d'une projection, mais l'effet n'est pas très bon. Voici une méthode SVG). , qui utilise pleinement la fonction de zoom pour obtenir un tel effet

1. D'où vient le 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é avec un logiciel de conception (SVG est conçu pour les machines au début (c'est très défavorable à la lecture humaine). Par exemple, je l'ai dessiné ici avec Figma (un polygone suffit), n'importe quelle taille fera l'affaire

Ensuite, j'ai obtenu un tel 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

2. SVG La fonction de mise à l'échelle

Maintenant, SVG a une taille par défaut. Si vous modifiez manuellement la taille par défaut de SVG, comme suit

Est-ce quelque peu similaire à l'effet de object-fit:contain ? Que dois-je faire si je veux couvrir toute la zone et la forcer à s’étirer ? Ici, vous devez utiliser l'attribut de mise à l'échelle de SVG preserveAspectRatioobject-fit:contain的效果？如果想整个铺满，强制拉伸该怎么做呢？这里需要用到 SVG 的缩放属性preserveAspectRatio，表示当 SVG 的实际尺寸和viewBox尺寸不一致时的缩放规则，有点类似于 object-fit 和 object-position 组合。这里的取值非常多，默认值是xMidYMid，表示强制等比缩放，并且居中对齐。

有兴趣的可以参考这篇文章：理解SVG viewport,viewBox,preserveAspectRatio缩放，案例非常详细

https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

这里我们不需要等比缩放，可以直接设置为none

<svg preserveAspectRatio="none">
...
</svg>

效果如下

三、SVG 的描边缩放

在设置不等比缩放后，其实描边还有一点小问题，不同尺寸下，描边的粗细不同，如下

有没有办法让描边不会跟随 SVG 尺寸缩放呢？当然也是有的！SVG 中有一个属性 vector-effect可以控制描边不缩放，永远保持默认设置的尺寸，有兴趣的可以参考这篇文章 CSS vector-effect与SVG stroke描边缩放，这里只需要在 path添加属性vector-effect="non-scaling-stroke", indiquant la règle de mise à l'échelle lorsque la taille réelle du SVG n'est pas cohérente avec la taille de viewBox, quelque peu similaire à object-fit et la combinaison objet -position. Il existe de nombreuses valeurs ici. La valeur par défaut est xMidYMid, ce qui signifie une mise à l'échelle et un alignement forcés.

Si vous êtes intéressé, vous pouvez vous référer à cet article : Comprendre la fenêtre SVG, viewBox, préserverAspectRatio scaling, le cas est très détaillé

https://www.zhangxinxu.com/ wordpress/2014/08 /svg-viewport-viewbox-preserveaspectratio/

<svg preserveAspectRatio="none">
	<path vector-effect="non-scaling-stroke">...</path>
</svg>

3. Mise à l'échelle du trait de SVG

Après avoir défini le rapport de mise à l'échelle inégal, 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.

<svg width="100%"    style="max-width:90%" 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>

div{
  background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}

div{
  background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}

（学习视频分享：web前端）

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!