pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

SVG進階 | SVG剪裁路徑

SVG剪裁路徑是指根據指定的路徑或形狀來剪裁SVG圖形。應用了剪裁路徑的圖形,在剪裁路徑內部的圖形可以被顯示出來,在剪裁路徑之外的圖形會被隱藏。 ...,HTML5中國,中國最大的H
1.jpg

  SVG剪裁路徑是指根據指定的路徑或形狀來剪裁SVG圖形。應用了剪裁路徑的SVG圖形,在剪裁路徑內部的圖形可以被顯示出來,在剪裁路徑之外的圖形會被隱藏。

  剪裁路徑的例子

  下面是一個簡單的SVG剪裁路徑的例子:
  1. <defs>
  2.   <clipPath id="clipPath">
  3.       <rect x="15" y="15" width="40" height="40" />
  4.   </clipPath>
  5. </defs>

  6. <circle cx="25" cy="25" r="20"
  7.       style="fill: #0000ff; clip-path: url(#clipPath); " />                             
復制代碼

  這個例子定義了一個矩形的剪裁路徑(<clipPath>中<rect>的元素)。在后面的SVG圓形中,通過style屬性的clip-path指向了這個剪裁路徑。

  下面的左邊圖像是返回結果。右邊的圖像也是返回結果,但是它將剪裁路徑一起顯示出來了。

2.jpg

  注意觀察,只有在矩形剪裁路徑內部的圓形才會被顯示出來,之外的部分會被剪裁掉。

  高級剪裁路徑

  你可以使用任何圖形來作為剪裁路徑。可以是圓形、橢圓、多邊形或自定義路徑。

  在下面的例子中使用一條自定義路徑來作為剪裁路徑。這條剪裁路徑會被應用到一個<rect>元素上。

  1. <defs>
  2.     <clipPath id="clipPath3">
  3.         <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
  4.     </clipPath>
  5. </defs>

  6. <rect x="5" y="5" width="190" height="90"
  7.       style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>   
復制代碼

  在下面的右邊的圖像是返回結果,左邊的圖像是沒有使用剪裁路徑的矩形。

3.jpg

  在組(GROUPS)中應用剪裁路徑

  我們可以對一組SVG圖形使用剪裁路徑。實現的方法是將所有的圖形放到一個<g>元素中,然后設置<g>元素的clip-pathCSS屬性。下面是一個例子:
  1. <defs>
  2.     <clipPath id="clipPath4">
  3.         <rect x="10" y="20" width="100" height="20" />
  4.     </clipPath>
  5. </defs>

  6. <g style="clip-path: url(#clipPath4);">
  7.     <rect x="5" y="5" width="190" height="90"
  8.           style="stroke: none; fill:#00ff00;"/>
  9.     <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
  10. </g>        
復制代碼

  在下面左邊的圖像是沒有使用剪裁路徑的圖像。右邊的圖像是上面代碼的返回結果。

4.jpg

  文字剪裁路徑

  我們還可以使用文字來作為剪裁路徑。使用SVG<text> 來作為剪裁路徑的一個好處是你可以自定義字體。下面是一個簡單的文字剪裁路徑的例子:
  1. <defs>
  2.     <clipPath id="clipPath5">
  3.         <text x="10" y="20" style="font-size: 20px; ">This is a text</text>
  4.     </clipPath>
  5. </defs>

  6. <g style="clip-path: url(#clipPath5);">
  7.     <rect x="5" y="5" width="190" height="90"

  8.           style="stroke: none; fill:#00ff00;"/>
  9.     <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />                              

復制代碼

  下面左邊的圖像沒有使用剪裁路徑。右邊的圖像使用了文字剪裁路徑。

5.jpg

  本文版權屬于jQuery之家,轉載請注明出處:http://www.htmleaf.com/ziliaoku/ ... g/201507032160.html

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。
svg

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 震动筛选机|震动分筛机|筛粉机|振筛机|振荡筛-振动筛分设备专业生产厂家高服机械 | 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | LED显示屏_LED屏方案设计精准报价专业安装丨四川诺显科技 | 合肥网带炉_安徽箱式炉_钟罩炉-合肥品炙装备科技有限公司 | 广东护栏厂家-广州护栏网厂家-广东省安麦斯交通设施有限公司 | 识禅_对禅的了解,从这里开始 | 新中天检测有限公司青岛分公司-山东|菏泽|济南|潍坊|泰安防雷检测验收 | 锤式粉碎机,医药粉碎机,锥式粉碎机-无锡市迪麦森机械制造有限公司 | 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 挨踢网-大家的导航!| 山东成考网-山东成人高考网 | 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 工业制氮机_psa制氮机厂家-宏骁智能装备科技江苏有限公司 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 槽钢冲孔机,槽钢三面冲,带钢冲孔机-山东兴田阳光智能装备股份有限公司 | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 奥因-光触媒除甲醛公司-除甲醛加盟公司十大品牌 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 超声波乳化机-超声波分散机|仪-超声波萃取仪-超声波均质机-精浩机械|首页 | 亮点云建站-网站建设制作平台| 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 浙江筋膜枪-按摩仪厂家-制造商-肩颈按摩仪哪家好-温州市合喜电子科技有限公司 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 小港信息港-鹤壁信息港 鹤壁老百姓便民生活信息网站 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 磁力加热搅拌器-多工位|大功率|数显恒温磁力搅拌器-司乐仪器官网 | 氢氧化钙设备, 氢氧化钙生产线-淄博惠琛工贸有限公司 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 创客匠人-让IP变现不走弯路| 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | cnc精密加工_数控机械加工_非标平键定制生产厂家_扬州沃佳机械有限公司 | 尾轮组_头轮组_矿用刮板_厢式刮板机_铸石刮板机厂家-双驰机械 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 |