在接下來的内容中，來介紹一下CSS中的基本圖形和路徑。希望對大家有所幫助。
CSS中的基本圖形
在CSS中polygon()、circle()、ellipse()和inset()函數可以繪制基本形狀。在CSS中的offset-path和shape-outside中都可以使用這四個圖形函數，實現對應的路徑動畫以及文本圍繞排版效果。他們雖然繪制基本形狀，但也常將其稱之爲路徑圖形。那麽什麽是路徑呢？
什麽是路徑？
使用過SVG的同學對路徑這個詞並不會感到陌生，在SVG中有一個使用過SVG的同學對路徑這個詞並不會感到陌生，在SVG中有一個<path>
在CSS中可以通過path()來實現類似上面繪制圖形的效果：
path("M 25,100 C 25,150 75,150 75,100 S 100,25 150,75");屬性中的圖形
如果你前面有接觸過clip-path或者shape-outside話知道。雖然這裡面用到類似像circle()和polygon()的圖形，但令人奇怪的是，使用的並不是像SVG中的
看上去有些混亂，但我們可以慢慢將這些理一理，能幫助你更好的理解CSS中的形狀和路徑。
clip-path可以使用基本形狀但不能使用path()
在CSS的clip-path屬性中可以使用CSS的基本圖形（polygon()、circle()、ellipse()和inset()）但不能使用path()。比如，我們在項目中需要使用不槼則的用戶頭像，那麽我們可以通過clip-path來完成。比如：
.avatar {
clip-path: polygon(0% 5%, 100% 0%, 100% 85%, 65% 80%, 75% 100%, 40% 80%, 0% 75%);
}你能看到類似下圖的效果：
但是，如果你想要用戶的頭像實現像下圖這樣形狀的效果：
對於上圖這樣的形狀，使用基本的圖形形狀函數是沒辦法實現的，但在clip-path中又沒有辦法使用path()函數。不過值得慶幸的是，在clip-path中可以通過url()傳一個帶有ID屬性名的
而
bubble-path
特別注意：在clipPath中需要指定一個明確的ID屬性值，比如這裡指定了id="clip"，另外爲了讓SVG元素不顯示，不佔空間，給
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}這個時候再通過clip-path的url()將SVG繪制的路徑圖形，運用到用戶頭像中：
.avatar {
width: 100px;
height: 100px;
margin-right: 2rem;
clip-path: url(#clip);
}此時你將看到的效果如下圖所示：
offset-path可以使用path()但不能使用基本形狀
offset-path早期稱爲motion-path。只是後來槼範將其改變offset-path，而它主要用來制作路徑動畫效果，用來指定動畫的行動路徑。比如下面這個效果：
動畫中的小圓球行動的路徑，就是通過path()來完成的：
path("M100.5,39.47C100.5,58.3,83.36,74,60.58,77.64l16.85,19.9L33.94,76.25C14.47,70.92.5,56.47.5,39.47c0-21.52,22.39-39,50-39S100.5,17.95,100.5,39.47Z");具體的代碼如下：
.move-me {
offset-path: path("M100.5,39.47C100.5,58.3,83.36,74,60.58,77.64l16.85,19.9L33.94,76.25C14.47,70.92.5,56.47.5,39.47c0-21.52,22.39-39,50-39S100.5,17.95,100.5,39.47Z");
animation: move 3s linear infinite;
}
@keyframes move {
100% {
motion-offset: 100%;
}
}同樣的有一個問題，如果你想讓小球按一個圓形來運動，你可能會想到像circle(50% at 50% 50%)來繪制的圖形路徑，但不幸的是，沒有效果。那是因爲offset-path並不支持circle()函數繪制的路徑。不過值得慶幸的是，同樣可以使用path()來會制一個圓形：
offset-path: path("M100,50a50,50,0,1,1-50-50A50,50,0,0,1,100,50Z");除此之外，還可以使用複合動畫來模擬一個圓形動畫效果。在@Lea Verou的《CSS Secrets》一書中就有一節專門介紹使用其它方法來實現圓形的路徑動效。
其中原理很簡單，簡單用下圖就能闡述：
shape-outside可以使用基本圖形，但不支持path()
shape-outside和clip-path類似，在其屬性值中只能使用CSS的基本圖形函數，但不能使用path()函數繪制的圖形。
shape-outside是能讓文本圍繞不同形狀排版，如果從未接，可以點擊早前整理的相關文章。
來看一個簡單的示例：
.egg {
float: left;
shape-outside: ellipse(120px 160px at 50% 50%);
width: 280px;
height: 320px;
}將看到的效果如下：
而其中效果圖中的橢圓是通過clip-path繪制的：
clip-path: ellipse(120px 160px at 50% 50%);
但有時候你想讓文本圍繞一個彎曲的形狀進行排版，像下圖所示：
CSS中的基本圖形函數是沒法繪制上圖那相的曲線圖形形狀，但path()可以，只不過shape-outside不能支持path()繪制的形狀。不過還好，在shape-outside中也可以通過url()來傳SVG中繪制好的形狀。也可以像傳遞一個圖片的形式使用：
shape-outside: url('curved-shape.svg');使用shape-outside實現文本圍繞不同形狀的排版效果，需要對圖形元素使用浮動。但在CSS中提供了CSS Exclusions模塊，它可以解決這個問題。如果你感興趣的話，可以閲讀《CSS Exclusions:讓布局變得更有意思》一文。
在CSS中使用path()改變的基本圖形
在SVG中可以通過
很有意思的是，在CSS中可以使用path()來改變SVG中的
.svg-1:hover path {
d: path("M8,2 L2,8");
}
從上面的效果和代碼中，可以看出。在CSS中給顯式的設置了path元素的樣式，修改path元素的屬性的屬性值。比如path元素中的d屬性的值，
svg:hover circle {
cx: 40;
cy: 40;
r: 40;
}看上去是不是很有意思。
總結
這篇文章簡單的介紹了CSS中屬性中怎麽使用基本圖形函數和路徑圖形函數：
clip-path和shape-outside屬性值中可以使用polygon()、circle()、ellipse()和inset()函數繪制的圖形，但不能使用path()函數，不過可能通過url()給其傳
offset-path和clip-path以及shape-outside相反，只能使用path()函數繪制的圖形，但不能使用CSS中繪制圖形的圖形函數
在CSS中可以顯式的重置svg元素中圖形元素的屬性值，從而改變SVG繪制的圖形。
