小说排行榜,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

一篇文章帶你了解SVG 剪切路徑

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

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

一、剪輯路徑

這是一個簡單的剪輯路徑。

SVG代碼：

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

運(yùn)行效果：

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

注

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

二、高級剪切路徑

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

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

SVG代碼：

運(yùn)行效果：

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

1. 在組上剪裁路徑

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

示例SVG代碼

運(yùn)行效果：

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

2. 文本作為剪切路徑

也可以將文本用作剪切路徑。這是一個實SVG代碼：

SVG代碼：

 
 
 
   
  
  
     
  
  
                 
  
  
                 
  
  
             
  
  
             
  
  
                 
  
  
                     
  
  
                         
  
  
                          This is a text

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

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

三、總結(jié)

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

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

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

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

分享文章：一篇文章帶你了解SVG 剪切路徑
鏈接地址：http://www.fisionsoft.com.cn/article/ccscpeg.html

新聞中心

其他資訊