這篇文章主要介紹HTML5中SVG如何繪制自適應(yīng)的菱形，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供社旗企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、網(wǎng)站建設(shè)、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為社旗眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

問(wèn)題：需要繪制一個(gè)自適應(yīng)尺寸的菱形，并且還有邊框，一般在流程圖中很常見，效果如下

如果沒(méi)有邊框的話，用 CSS clip-path 也能很方便的裁剪出一個(gè)菱形，但是邊框不太好處理（通常用嵌套一層的方式或者投影來(lái)模擬，但是效果不太好），這里介紹一個(gè) SVG 方式，充分利用縮放特性來(lái)實(shí)現(xiàn)這樣一個(gè)效果

一、SVG 從何而來(lái)

SVG 通常都不需要手寫代碼（除少量基本形狀以外），一般都可以用設(shè)計(jì)軟件生成（SVG 在設(shè)計(jì)之初就是給機(jī)器看的，非常不利于人工閱讀）。比如，我這里是用 Figma 繪制的（一個(gè)多邊形就搞定），隨便什么尺寸都行

然后就得到了這樣一段 SVG

在瀏覽器中效果如下

二、SVG 的縮放特性

現(xiàn)在 SVG 有一個(gè)默認(rèn)尺寸，如果手動(dòng)改變 SVG 的默認(rèn)尺寸，如下

是不是有點(diǎn)類似于object-fit:contain的效果？如果想整個(gè)鋪滿，強(qiáng)制拉伸該怎么做呢？這里需要用到 SVG 的縮放屬性preserveAspectRatio，表示當(dāng) SVG 的實(shí)際尺寸和viewBox尺寸不一致時(shí)的縮放規(guī)則，有點(diǎn)類似于 object-fit 和 object-position 組合。這里的取值非常多，默認(rèn)值是xMidYMid，表示強(qiáng)制等比縮放，并且居中對(duì)齊。

有興趣的可以參考這篇文章：理解SVG viewport,viewBox,preserveAspectRatio縮放，案例非常詳細(xì)

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

這里我們不需要等比縮放，可以直接設(shè)置為none

...

效果如下

三、SVG 的描邊縮放

在設(shè)置不等比縮放后，其實(shí)描邊還有一點(diǎn)小問(wèn)題，不同尺寸下，描邊的粗細(xì)不同，如下

有沒(méi)有辦法讓描邊不會(huì)跟隨 SVG 尺寸縮放呢？當(dāng)然也是有的！SVG 中有一個(gè)屬性 vector-effect可以控制描邊不縮放，永遠(yuǎn)保持默認(rèn)設(shè)置的尺寸，有興趣的可以參考這篇文章 CSS vector-effect與SVG stroke描邊縮放，這里只需要在 path添加屬性vector-effect="non-scaling-stroke"就行了，表示描邊不跟隨縮放，如下

	...

這樣就實(shí)現(xiàn)了一個(gè)自適應(yīng)尺寸的菱形了，描邊也不會(huì)縮放，完整 SVG 代碼如下

四、SVG 內(nèi)聯(lián) base64

通常情況下，這樣一個(gè)圖形用作背景圖更為合適（SVG代碼放在頁(yè)面上不太美觀）。讓人驚訝的是，將 SVG 轉(zhuǎn)換成 base64 后，以上特性仍然是存在的。這里使用張?chǎng)涡窭蠋煹?SVG在線壓縮合并工具，如下

轉(zhuǎn)換后，將這段 base64 直接用作背景就行

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

這樣就得到了一個(gè)自適應(yīng)的菱形背景了

以上是“HTML5中SVG如何繪制自適應(yīng)的菱形”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！