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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 篷房|仓储篷房|铝合金篷房|体育篷房|篷房厂家-华烨建筑科技官网 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 电动手术床,医用护理床,led手术无影灯-曲阜明辉医疗设备有限公司 | 合肥触摸一体机_触摸查询机厂家_合肥拼接屏-安徽迅博智能科技 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | PVC地板|PVC塑胶地板|PVC地板厂家|地板胶|防静电地板-无锡腾方装饰材料有限公司-咨询热线:4008-798-128 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 电缆接头_防水接头_电缆防水接头 - 乐清市新豪电气有限公司 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 水压力传感器_数字压力传感器|佛山一众传感仪器有限公司|首页 | 上海诺狮景观规划设计有限公司 | 苏州柯瑞德货架-仓库自动化改造解决方案 | 福州仿石漆加盟_福建仿石漆厂家-外墙仿石漆加盟推荐铁壁金钢(福建)新材料科技有限公司有保障 | 手持式线材张力计-套帽式风量罩-深圳市欧亚精密仪器有限公司 | 洗地机-全自动/手推式洗地机-扫地车厂家_扬子清洁设备 | 泵阀展|阀门展|水泵展|流体机械展 -2025上海国际泵管阀展览会flowtech china | 自动化展_机器人展_机床展_工业互联网展_广东佛山工博会 | 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 海水晶,海水素,海水晶价格-潍坊滨海经济开发区强隆海水晶厂 | 代写标书-专业代做标书-商业计划书代写「深圳卓越创兴公司」 | 江西高职单独招生-江西单招考试-江西高职单招网 | 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 铣刨料沥青破碎机-沥青再生料设备-RAP热再生混合料破碎筛分设备 -江苏锡宝重工 | 一航网络-软件测评官网| 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 桐城新闻网—桐城市融媒体中心主办| 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 智能型高压核相仪-自动开口闪点测试仪-QJ41A电雷管测试仪|上海妙定 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 月嫂_保姆_育婴_催乳_母婴护理_产后康复_养老护理-吉祥到家家政 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | 高低温试验房-深圳高低温湿热箱-小型高低温冲击试验箱-爱佩试验设备 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 青岛美佳乐清洁工程有限公司|青岛油烟管道清洗|酒店|企事业单位|学校工厂厨房|青岛油烟管道清洗 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 |