建站
咨詢
售后
建站咨詢
新聞中心
SVG 不僅僅是圖標(biāo)和插圖，它還有很多我們開發(fā)人員有時(shí)會(huì)忘記的隱藏力量。與 CSS 相比，使用 SVG 有很多用途。例如，構(gòu)建循環(huán)加載動(dòng)畫，或在圖像上應(yīng)用蒙版，在這種情況下，這并不意味著無法使用 CSS，但有時(shí)基于所使用的技術(shù)（例如：掩碼）來解決跨瀏覽器問題可能會(huì)很痛苦，因此，使用 SVG 可以節(jié)省時(shí)間和精力。
創(chuàng)新互聯(lián)建站專注于播州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供播州營(yíng)銷型網(wǎng)站建設(shè)，播州網(wǎng)站制作、播州網(wǎng)頁設(shè)計(jì)、播州網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造播州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供播州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
SVG 的偉大之處在于它們可以響應(yīng)迅速、高性能，并且可以使用 HTML 和 CSS 開箱即用。在本文中，我的目標(biāo)是向您介紹不同的用例，在這些用例中，我們可以使用 SVG 以及 HTML 和 CSS 來構(gòu)建特定的 UI 組件。
現(xiàn)在，讓我們進(jìn)入用例，你準(zhǔn)備好了嗎？
刪減頭像
裁切出的頭像效果是我在查看 Facebook 的 CSS 時(shí)發(fā)現(xiàn)的，在 messenger 中，用戶頭像上可以有一個(gè)提示徽章，化身被剪裁為徽章分配空間。
這可以通過添加 CSS 白色邊框（作為快速修復(fù)）來完成。但是為什么不將其進(jìn)一步應(yīng)用到動(dòng)態(tài) SVG 組件中呢？
.badge {
border: 2px solid #ff;
}您可能在想，如果邊框有效，為什么要使用 SVG？好吧，這里沒有對(duì)錯(cuò)。但是有一個(gè)比另一個(gè)更好的解決方案，你還記得在數(shù)學(xué)課上老師可能會(huì)提到同一個(gè)問題可能有不同的解決方案，而其中一個(gè)在靈活性方面可能會(huì)更好嗎？我對(duì)我們的情況也有同樣的感覺。
無論如何，我將向您展示邊界解決方案將如何快速失敗，它會(huì)失?。?/p>
- 懸停時(shí)：卡片背景會(huì)發(fā)生變化，因此白色邊框會(huì)顯得奇怪。
- 深色模式：白色邊框?qū)⑽挥诤谏尘爸?/li>
在下圖中，請(qǐng)注意徽章的白色邊框如何干擾深色背景和懸停狀態(tài)。
我們可以通過改變懸停時(shí)的邊框顏色來解決這個(gè)問題，但這對(duì)我來說似乎不是最好的解決方案。
.card__badge {
border: 2px solid #ff;
}
.card:hover .card__badge {
border-color: lightgrey;
}
@media (prefers-color-scheme: dark) {
.card__badge {
border-color: #454545;
}
}使用 SVG，可以通過切割徽章下方的區(qū)域，這是更好的方式，就可以解決上述問題，這樣，它將適用于任何類型的背景。
考慮下圖：
我們使用 SVG
在遮罩中，任何帶有黑色填充的元素都將被隱藏??，而白色的元素將可見。黑色圓圈位于右下角，半徑為 18。
在設(shè)計(jì)工具中，上述稱為減法，我們想從較大的圓圈中減去小圓圈。
代碼演示地址：https://codepen.io/shadeed/pen/bGWaQOG
部分標(biāo)題
在我的一個(gè)客戶項(xiàng)目中，我通過結(jié)合 SVG 和 CSS 設(shè)計(jì)并構(gòu)建了一個(gè)章節(jié)標(biāo)題，該品牌與安全有關(guān)，因此使用這種風(fēng)格可能適合。
組件需要處理短標(biāo)題和長(zhǎng)標(biāo)題，如果標(biāo)題太長(zhǎng)，它應(yīng)該換成多行而不破壞布局。為了構(gòu)建它，我做了以下事情：
- 首先，我復(fù)制了固定部分（在右側(cè)）并將其附加為內(nèi)聯(lián) SVG。
- 使用 CSS 創(chuàng)建標(biāo)題下的線條，以及線條開頭和結(jié)尾的小圓圈。
- 我使用 flexbox 構(gòu)建了組件布局，以避免使用任何不需要的定位。
讓我們從基本的 HTML 和 CSS 開始。
HTML:
CSS is awesome
CSS:
.c-section__title {
max-width: 700px;
width: fit-content;
display: flex;
margin-left: auto;
margin-right: auto;
}
下一步，我想在 元素下添加一個(gè)邊框，以模仿 SVG 的連接線。
我注意到 SVG 沒有與線路連接，由于我們使用的是 flexbox，因此，修復(fù)它很簡(jiǎn)單，我們只需要將 flex 項(xiàng)目與 flex-end 對(duì)齊。
.c-section__title {
max-width: 700px;
width: fit-content;
display: flex;
align-items: flex-end;
margin-left: auto;
margin-right: auto;
}
然后，我們需要使用具有絕對(duì)定位的偽元素在開始和結(jié)束處添加圓圈。
代碼演示地址：https://codepen.io/shadeed/pen/bGoOxXL
使用 SVG 的另一個(gè)好處是，我們可以將 SVG 路徑變成可以動(dòng)畫的虛線。為此，我們需要確保未列出 SVG 中的導(dǎo)出路徑。
HTML：
這個(gè)方法是我從 Jake Archibald 的文章中學(xué)到的。
在 Chrome DevTools 中，檢查 SVG 并選擇
$0.getTotalLength()
// 139.46
$0 是一種從 DOM 中選擇元素的快速方法，無需進(jìn)行如下操作：
let sectionPath = document.querySelector('#path');
console.log(sectionPath.getTotalLength());這是本示例上下文中的一個(gè)快速提示。
現(xiàn)在我們有了長(zhǎng)度，我們可以用它做任何我們想做的事情。例如，我們可以在懸停時(shí)對(duì)其進(jìn)行動(dòng)畫處理。
.c-section__title--dashed path {
stroke-dasharray: 139;
stroke-dashoffset: 0;
transition: 0.7s;
}
.c-section__title--dashed:hover path {
stroke-dashoffset: 139;
}
代碼演示地址：https://codepen.io/shadeed/pen/xxXmyWE
或者我們可以簡(jiǎn)單地把它變成一條虛線（在這種情況下我們真的不需要知道路徑長(zhǎng)度）。
帶有 SVG 的自定義鏈接下劃線
我們可以使用 SVG 創(chuàng)建自定義鏈接下劃線來激發(fā)快樂，我?guī)啄昵皠?chuàng)建了一個(gè)腳本，它隨機(jī)生成一條路徑并在懸停時(shí)重新繪制它。
前后預(yù)覽效果如下：
我們的想法是我們要為每個(gè)鏈接插入一個(gè) SVG，它看起來像下面這樣：
神奇的是通過改變 d 屬性值來實(shí)現(xiàn)的。這是一個(gè)顯示路徑實(shí)際繪制方式的視覺效果。
代碼演示地址：https://codepen.io/shadeed/pen/OeNbMO
定制 SVG 膠帶效果
在處理客戶項(xiàng)目時(shí)，我需要一種將磁帶附加到部分內(nèi)容的方法，該方法可以使用 CSS 放置在任何地方，并且足夠動(dòng)態(tài)，僅通過一個(gè) CSS 變量即可更改其顏色。
效果如下圖：
在 Adobe Illustrator 中，我將磁帶分為幾層：
- 基礎(chǔ)：采用填充顏色
- 透明黑色：顯示較暗的區(qū)域
- 透明白色：顯示較亮的區(qū)域
讓我們看一下 SVG 代碼。
請(qǐng)注意，我添加了 fill=currentColor。currentColor 關(guān)鍵字將繼承 CSS color 屬性的值，以便我們可以僅使用一個(gè)屬性動(dòng)態(tài)更改顏色。
鑒于我們有一個(gè)純色的底座，以及另外兩層用于明暗區(qū)域的圖層，因此，更改顏色會(huì)產(chǎn)生不同外觀的膠帶。
更好的是，我們可以將 SVG 轉(zhuǎn)換為模板，并從
請(qǐng)注意我是如何通過
下面是 CSS 的樣子：
.tape {
width: var(--size);
transform: rotate(var(--angle));
}
源碼演示地址：https://codepen.io/shadeed/pen/OJRYaZK
最后總結(jié)
借助 SVG 構(gòu)建 UI 組件可以讓事情變得更簡(jiǎn)單、更直接，一些 UI 組件可能不是 100% 完美的用例或 SVG（例如：頭像剪裁），但這取決于您正在處理的項(xiàng)目需求。
你有使用 SVG 和 CSS 的用例嗎？如果有的話，歡迎您跟我們一起來分享。如果您覺得我這篇文章內(nèi)容對(duì)你有幫助的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將它分享給您的朋友，也許能夠幫助到他。
最后，感謝您的閱讀，編程快樂！
當(dāng)前題目：使用SVG和CSS構(gòu)建UI組件
鏈接URL：http://www.5511xx.com/article/copidso.html
