日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一篇文章帶你了解SVG 剪切路徑

SVG剪切路徑(也稱為SVG剪切)用于根據(jù)特定路徑剪切SVG形狀。路徑內(nèi)部的形狀部分可見(jiàn)，外部的部分不可見(jiàn)。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、慶元網(wǎng)絡(luò)推廣、微信小程序開(kāi)發(fā)、慶元網(wǎng)絡(luò)營(yíng)銷、慶元企業(yè)策劃、慶元品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供慶元建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

一、剪輯路徑

這是一個(gè)簡(jiǎn)單的剪輯路徑。

SVG代碼：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.         項(xiàng)目 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.      
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.              
    10.   
  
  
  
  10.                  
    11.   
  
  
  
  11.                      
    12.   
  
  
  
  12.                  
    13.   
  
  
  
  13.              
    14.   
  
  
  
  14.              
    15.   
  
  
  
  15.          
    16.   
  
  
  
  16.          
    17.   
  
  
  
  17.              
    18.   
  
  
  
  18.                  
    19.   
  
  
  
  19.                      
    20.   
  
  
  
  20.                  
    21.   
  
  
  
  21.              
    22.   
  
  
  
  22.              
    23.   
  
  
  
  23.              
    24.   
  
  
  
  24.          
    25.   
  
  
  
  25.      
    26.   
  
  
  
  26.  
    27.

這個(gè)實(shí)SVG代碼定義了一個(gè)形狀類似于矩形(元素中的形狀)的剪輯路徑。示SVG代碼末尾定義的圓通過(guò)CSS屬性 clip-path 引用了 id屬性。

運(yùn)行效果：

左下方是生成的圖像。右邊是同一圖像，但也繪制了剪切路徑。

注

在剪切路徑內(nèi)只有圓的部分是可見(jiàn)的。其余部分將被剪切。

二、高級(jí)剪切路徑

可以使用矩形以外的其他形狀作為剪切路徑?？梢允褂脠A形，橢圓形，多邊形或自定義路徑。任何SVG形狀都可以用作剪切路徑。

這是將元素用作剪切路徑的示SVG代碼，因?yàn)檫@些是可以使用的最高級(jí)的剪切路徑類型。剪輯路徑將應(yīng)用于元素。

SVG代碼：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.              
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.  
    12.

運(yùn)行效果：

這是生成的圖像-在右側(cè)。左側(cè)顯示沒(méi)有剪切路徑的圖像。

1. 在組上剪裁路徑

可以在一組SVG形狀上使用剪切路徑，而不是分別在每個(gè)形狀上使用。只需將形狀放在元素內(nèi)，然后在元素上設(shè)置CSS屬性clip-path即可。這是一個(gè)實(shí)SVG代碼：

示例SVG代碼

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.          
    8.   
  
  
  
  8.              
    9.   
  
  
  
  9.          
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.          
    13.   
  
  
  
  13.          
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.  
    16.

運(yùn)行效果：

下面是沒(méi)有剪切路徑的圖像，然后是應(yīng)用剪切路徑的圖像：

2. 文本作為剪切路徑

也可以將文本用作剪切路徑。這是一個(gè)實(shí)SVG代碼：

SVG代碼：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.              
    3.   
  
  
  
  3.              
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.          
    6.   
  
  
  
  6.              
    7.   
  
  
  
  7.                  
    8.   
  
  
  
  8.                      
    9.   
  
  
  
  9.                         This is a text 
    10.   
  
  
  
  10.                      
    11.   
  
  
  
  11.                  
    12.   
  
  
  
  12.              
    13.   
  
  
  
  13.              
    14.   
  
  
  
  14.                  
    15.   
  
  
  
  15.                  
    16.   
  
  
  
  16.              
    17.   
  
  
  
  17.          
    18.

這是帶有和不帶有剪切路徑的結(jié)果圖像：

正如看到的，現(xiàn)在只顯示文本內(nèi)部形狀的一部分。

三、總結(jié)

本文基于SVG基礎(chǔ)，介紹了如何剪切路徑，可以根據(jù)特定路徑剪切SVG形狀。還介紹了高級(jí)的剪切路徑(在組上剪裁路徑、文本作為剪切路徑)通過(guò)項(xiàng)目的分析，案例的效果圖的展示，能夠讓讀者更好的理解SVG路徑剪切的用法。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

希望能夠幫助你更好的學(xué)習(xí)。

本文轉(zhuǎn)載自微信公眾號(hào)「 前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。


網(wǎng)站標(biāo)題：一篇文章帶你了解SVG 剪切路徑
URL分享：http://www.5511xx.com/article/ccscpeg.html