這篇文章主要介紹了svg path在網(wǎng)頁開發(fā)中如何使用，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為龍沙企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，龍沙網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

SVG是矢量圖形表示，它的一個(gè)強(qiáng)大之處在于path標(biāo)簽可以表示任意的矢量形狀，利用好這個(gè)path可以做出很多傳統(tǒng)html/css做不出來的效果。下面舉幾個(gè)例子。

1. 做路徑動(dòng)畫

這個(gè)我在《SVG導(dǎo)航下劃線光標(biāo)跟隨效果》文后補(bǔ)充介紹了這個(gè)實(shí)現(xiàn)，最后的效果是這樣的：

實(shí)現(xiàn)代碼如下：

利用animateMotion結(jié)合path做的動(dòng)畫，具體說明可見上文。

2. 實(shí)現(xiàn)不規(guī)則形狀的點(diǎn)擊

如下圖所示，需要實(shí)現(xiàn)點(diǎn)到哪個(gè)洲就進(jìn)入哪個(gè)洲的效果，例如點(diǎn)到非洲就進(jìn)入非洲：

我們可以用div定一個(gè)框蓋在非洲的上面，但是用div的話只能是規(guī)則的四方形，沒辦法實(shí)現(xiàn)點(diǎn)到非洲大陸的時(shí)候才進(jìn)入，但是大陸的輪廓又是不規(guī)則的，所以用傳統(tǒng)html是不能解決這個(gè)問題的。但是用SVG的path可以解決這個(gè)問題，方法1是監(jiān)聽path的點(diǎn)擊事件即可，如下圖所示：

因?yàn)檫@個(gè)輪廓可以跟UI要到，他們一般都是用AI/PS等矢量軟件畫出來的，讓他們導(dǎo)一個(gè)SVG給你就好了。

方法2是可以調(diào)SVG的isPointInFill這個(gè)API判斷點(diǎn)擊的點(diǎn)是否在Path的fill區(qū)域里面，這個(gè)也可以實(shí)現(xiàn)，但是相對(duì)于方法1來說比較麻煩，因?yàn)檫€需要把鼠標(biāo)的位置轉(zhuǎn)換為svg視圖的位置。

3. 沿著路徑拖拽的交互

在第1點(diǎn)沿著路徑的動(dòng)畫是自動(dòng)的過程，有沒有辦法讓用戶自己拖拽過去呢，實(shí)現(xiàn)如下效果：

這種的場(chǎng)景有音量控制等需要有百分比控制的?？梢韵扔靡粋€(gè)SVG的在線工具畫出一個(gè)這樣的圖形：

就可以拿到SVG的代碼：

<svg class="volumn-controller" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
    <path class="volumn-path" stroke="#000" d="m100,247c93,-128 284,-129 388,6" opacity="0.5" stroke-width="1" fill="#fff"/>
    <circle class="drag-button" r="12" cy="247" cx="100" stroke-width="1" stroke="#000" fill="#fff"/>
 </g>
</svg>

這里比較關(guān)鍵的是path標(biāo)簽里的d屬性，d是data的縮寫，定義這個(gè)路徑的形狀，它里面可以用很多屬性控制形狀的變化，如下圖所示：

為了實(shí)現(xiàn)這個(gè)交互，需要?jiǎng)討B(tài)地改變circle的圓心位置(cx, cy)到路徑上相應(yīng)的地方。SVG沒有直接提供相關(guān)的API，但是它提供了一個(gè)可以間接利用的API叫g(shù)etPointAtLength，傳遞一個(gè)長(zhǎng)度參數(shù)，如下代碼所示：

let volumnPath = document.querySelector('.volumn-path');
// 輸出path在長(zhǎng)度為100的位置的點(diǎn)坐標(biāo)
console.log(volumnPath.getPointAtLength(100));
// 輸出當(dāng)前path的總長(zhǎng)度
console.log(volumnPath.getTotalLength());

控制臺(tái)輸出：

把circle的cx/cy改成上面的x/y坐標(biāo)，圓圈就會(huì)跑到對(duì)應(yīng)的位置去了：

這里的問題在于這個(gè)API傳遞的length參數(shù)是相對(duì)于曲線長(zhǎng)度的，但是鼠標(biāo)移動(dòng)的位置是線性的，沒辦法直接知道當(dāng)前鼠標(biāo)在曲線上距離起始位置多少。

所以需要算一下，在這個(gè)場(chǎng)景里面我們可以取鼠標(biāo)的x坐標(biāo)在曲線上對(duì)應(yīng)的位置就可以了，如下圖示意：

到這里就有思路了，可以把這條路徑上每隔一個(gè)像素長(zhǎng)度就算一下它的坐標(biāo)在哪里，然后存在一個(gè)數(shù)組里面。由于鼠標(biāo)移動(dòng)的時(shí)候x坐標(biāo)是知道的，就可以查一下在這個(gè)數(shù)組里面相應(yīng)x坐標(biāo)的y坐標(biāo)是多少，就能得到想要的圓心位置了。

所以先計(jì)算一下，保存到一個(gè)數(shù)組：

let $volumnController = document.querySelector('.volumn-controller'),
    $volumnPath = $volumnController.querySelector('.volumn-path');
// 得到當(dāng)前路徑的總長(zhǎng)度
let pathTotalLength = $volumnPath.getTotalLength() >> 0;
let points = [];
// 起始位置為長(zhǎng)度為0的位置
let startX = Math.round($volumnPath.getPointAtLength(0).x);
// 每隔一個(gè)像素距離就保存一下路徑上點(diǎn)的坐標(biāo)
for (let i = 0; i < pathTotalLength; i++) {
    let p = $volumnPath.getPointAtLength(i);
    // 保存的坐標(biāo)用四舍五入，可以平衡誤差
    points[Math.round(p.x) - startX] = Math.round(p.y);
}

這里用一個(gè)p0ints數(shù)組來保存，它的索引index就為x坐標(biāo)，值為y坐標(biāo)。在這個(gè)例子里面，總長(zhǎng)度為451.5px，得到的points數(shù)組長(zhǎng)度為388. 你可以隔0.5px長(zhǎng)度就保存一個(gè)坐標(biāo)，不過在這個(gè)例子里面1px就夠了。

然后監(jiān)聽鼠標(biāo)事件，得到x坐標(biāo)，查詢y坐標(biāo)，動(dòng)態(tài)地改變circle的圓心位置，如下代碼所示：

let $dragButton = $volumnController.querySelector('.drag-button'),
    // 得到起始位置相對(duì)當(dāng)前視窗的位置，相當(dāng)于jQuery.fn.offset
    dragButtonPos = $dragButton.getBoundingClientRect();
function movePoint (event) {
    // 當(dāng)前鼠標(biāo)的位置減去圓心起始位置就得到移位偏差，12是半徑值，這里先直接寫死
    let diffX = event.clientX - Math.round(dragButtonPos.left + 12);
    // 需要做個(gè)邊界判斷
    diffX < 0 && (diffX = 0);
    diffX >= points.length && (diffX = points.length - 1);
    // startX是在上面的代碼得到的長(zhǎng)度為0的位置
    $dragButton.setAttribute('cx', diffX + startX);
    // 使用points數(shù)組得到y(tǒng)坐標(biāo)
    $dragButton.setAttribute('cy', points[diffX]);
}
$dragButton.addEventListener('mousedown', function (event) {
    document.addEventListener('mousemove', movePoint);
});
document.addEventListener('mouseup', function () {
    document.removeEventListener('mousemove', movePoint);
});    					

這個(gè)實(shí)現(xiàn)的代碼也是比較簡(jiǎn)單，需要注意的地方是起始位置的選取，這里有兩個(gè)坐標(biāo)系，一個(gè)是相對(duì)頁面的視窗的，它的原點(diǎn)(0, 0)坐標(biāo)點(diǎn)是當(dāng)前頁面可視區(qū)域（client）的左上角，第二個(gè)坐標(biāo)系是SVG的坐標(biāo)系，它的原點(diǎn)(0, 0)位置是SVG畫布的左上角，如下圖所示：

鼠標(biāo)的位置是相對(duì)于視圖client的，所以需要得到圓圈在client的位置，可以通過原生的getBoundingClient獲取，然后用鼠標(biāo)的clientX減掉圓圈的clientX就得到正確的位移偏差diff了，這個(gè)diff值加上圓圏的在svg坐標(biāo)的起始位置就能得到svg里的x坐標(biāo)了，然后去查一下points數(shù)組就能得到y(tǒng)坐標(biāo)，然后去設(shè)置circle的cx/cy值。

這個(gè)的實(shí)現(xiàn)已經(jīng)算是十分簡(jiǎn)單的，大概30行代碼。需要注意的是如果svg縮放了，那么坐標(biāo)也要相應(yīng)比例地改一下。所以最好是不要縮放，1：1顯示就簡(jiǎn)單多了。

如果要顯示具體的音量值呢？這個(gè)也好辦，只需要在第一步保存點(diǎn)坐標(biāo)的時(shí)候把在路徑上的長(zhǎng)度也保存下來就好了，最后效果如下：

如果路徑比較復(fù)雜怎么辦呢，一個(gè)x坐標(biāo)可能會(huì)對(duì)應(yīng)兩個(gè)點(diǎn)，如下圖所示：

這個(gè)也是有辦法的，計(jì)算的方法類似，也是需要把路徑上所有每隔1px的點(diǎn)坐標(biāo)都取出來，然后計(jì)算一下鼠標(biāo)的位置距離哪個(gè)點(diǎn)的坐標(biāo)最接近，然后就取那個(gè)點(diǎn)就好了。當(dāng)然在判斷哪個(gè)點(diǎn)最優(yōu)時(shí)，算法需要優(yōu)化，不能直接一個(gè)for循環(huán)，具體可見這個(gè)codepen。

4. 路徑的變形動(dòng)畫

路徑結(jié)合關(guān)鍵幀可以做出一些有趣的效果，如這個(gè)codepen的示例：

它的實(shí)現(xiàn)是hover的時(shí)候改變path的d值，然后做d的transition動(dòng)畫，如下代碼：

<svg viewBox="0 0 10 10" class="svg-1">
  <path d="M2,2 L8,8" />
</svg>
<style>
.svg-1:hover path {
  d: path("M8,2 L2,8");
}
path {
    transition: d 0.5s linear;
}
</style>

這種變形過渡動(dòng)畫是有條件的，就是它的路徑數(shù)據(jù)格式是要一致的，有多少個(gè)M/L/C屬性都要保持一致，否則無法做變形動(dòng)畫。

5. 結(jié)合clip-path做遮罩效果

使用CSS通常只能用border-radius做一些圓角的遮罩，即用border-radius結(jié)合overflow: hidden實(shí)現(xiàn)，但是使用clip-path + svg的路徑能夠做出任意形狀遮罩，如下做一個(gè)心形的：

如下代碼所示：

<div style="width:200px;height:200px">
    <img src="photo.png" alt style="width:100%">
</div>
<style>
img {
    clip-path: url("#heart");
}
</style>

style里面的id: #heart是指向了一個(gè)SVG的的clipPath，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <clipPath id="heart" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.0081967, 0.0101010)" d="m61.18795,24.08746c24.91828,-57.29309 122.5489,0 0,73.66254c-122.5489,-73.66254 -24.91828,-130.95562 0,-73.66254z"/>
    </clipPath>
</svg>   					

為了讓這個(gè)path剛好能撐起div容器寬度的100%，需要設(shè)置：

clipPathUnits="objectBoundingBox"

這樣會(huì)導(dǎo)致d屬性里面的單位變成比例的0到1，所以需要把它縮小一下，原本的width是122，height是99，需要需要scale的值為（1 / 122, 1 / 99）。這樣就達(dá)到100%占滿的目的，如果一開始d屬性坐標(biāo)比例就是0到1，就不用這么搞了。

另外clip-path使用svg的path不支持變形動(dòng)畫。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享svg path在網(wǎng)頁開發(fā)中如何使用內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，詳細(xì)的解決方法等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：svgpath在網(wǎng)頁開發(fā)中如何使用-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://m.rwnh.cn/article34/cedhpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、建站公司、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)