SVGClipPath如何實(shí)現(xiàn)六邊形圖像的方法

這篇文章主要介紹SVG ClipPath如何實(shí)現(xiàn)六邊形圖像的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為寧洱等服務(wù)建站，寧洱等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寧洱企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

使用SVG，我們可以添加剪切路徑來(lái)更改圖像的形狀。

首先，我們打開(kāi)一個(gè)帶有namespaced href屬性和命名空間定義的SVG標(biāo)記：

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">

然后我們創(chuàng)建一個(gè)clipPath并給它一個(gè)ID，它將作為參考應(yīng)用于我們的圖像。我們?cè)O(shè)計(jì)的clipPath將是我們圖像的可見(jiàn)部分。在這種情況下，我們實(shí)現(xiàn)六邊形（外部組元素<g>解決Safari上的錯(cuò)誤）。

<g>
   <clipPath id="hexagonal-mask">
      <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
   </clipPath>
</g>

最后，我們將路徑應(yīng)用于我們的圖像。這是一種很好的技術(shù)，因?yàn)槿绻覀儗D像包裹在一個(gè)鏈接中，它將不具有通常的矩形形狀，而是我們的一個(gè)clipPath（在這種情況下為六邊形）。我們可以這樣做：

<a xlink:href="http://www. web-expert.it">
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
</a>

這是最終的代碼：

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
       </clipPath>
    </g> 
    <a xlink:href="http://www. web-expert.it">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
    </a>
</svg>

以上是SVG ClipPath如何實(shí)現(xiàn)六邊形圖像的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：SVGClipPath如何實(shí)現(xiàn)六邊形圖像的方法
URL分享：http://muchs.cn/article10/iehggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、App設(shè)計(jì)、網(wǎng)站維護(hù)、搜索引擎優(yōu)化

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司