<div align="center"><font size="3"><img id="_aimg_29173" aid="29173" zoomfile="data/attachment/forum/201508/13/104847bcce7eqhd9ohevam.jpg" src="data/attachment/forum/201508/13/104847bcce7eqhd9ohevam.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="1.jpg" title="1.jpg" w="577"></font></div> <br><font size="3"> SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形,在剪裁路径内部的图形可以被显示出来,在剪裁路径之外的图形会被隐藏。</font><br><br><font size="3"> <strong> 剪裁路径的例子</strong></font><br><br><font size="3"> 下面是一个简单的SVG剪裁路径的例子:<br> <div class="blockcode"> <div id="code_gLr"> <ol> <li> <defs><br> <li> <clippath id="clipPath"><br> <li> <rect x="15" y="15" width="40" height="40"></rect><br> </li> <li> </li></clippath><br> </li> <li></defs><br> </li> <li> <br> </li> <li><circle cx="25" cy="25" r="20"> <li> style="fill: #0000ff; clip-path: url(#clipPath); " /> <br> </li> <li></circle></li> </ol> </div> <em onclick="copycode($('code_gLr'));">复制代码</em> </div> <br></font><font size="3"> 这个例子定义了一个矩形的剪裁路径(<clippath>中<rect>的元素)。在后面的SVG圆形中,通过style属性的clip-path指向了这个剪裁路径。</rect></clippath></font><br><br><font size="3"> 下面的左边图像是返回结果。右边的图像也是返回结果,但是它将剪裁路径一起显示出来了。</font><br><br><img id="_aimg_29174" aid="29174" zoomfile="data/attachment/forum/201508/13/104945n0ixo01noxnoin00.jpg" src="data/attachment/forum/201508/13/104945n0ixo01noxnoin00.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="2.jpg" title="2.jpg" w="494"><br><br><font size="3"> 注意观察,只有在矩形剪裁路径内部的圆形才会被显示出来,之外的部分会被剪裁掉。</font><br><br><font size="3"> <strong> 高级剪裁路径</strong></font><br><br><font size="3"> 你可以使用任何图形来作为剪裁路径。可以是圆形、椭圆、多边形或自定义路径。</font><br><br><font size="3"> 在下面的例子中使用一条自定义路径来作为剪裁路径。这条剪裁路径会被应用到一个<rect>元素上。<br><br> <div class="blockcode"> <div id="code_E68"> <ol> <li> <defs><br> <li> <clippath id="clipPath3"><br> <li> <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"></path><br> </li> <li> </li></clippath><br> </li> <li></defs><br> </li> <li> <br> </li> <li><rect x="5" y="5" width="190" height="90"> <li> style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/> </li></rect></li> </ol> </div> <em onclick="copycode($('code_E68'));">复制代码</em> </div></rect></font><br><font size="3"> 在下面的右边的图像是返回结果,左边的图像是没有使用剪裁路径的矩形。</font><br><br><font size="3"><img id="_aimg_29175" aid="29175" zoomfile="data/attachment/forum/201508/13/104945rjzxycuxu9cyij9j.jpg" src="data/attachment/forum/201508/13/104945rjzxycuxu9cyij9j.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="3.jpg" title="3.jpg" w="514"></font><br><br><font size="3"> <strong>在组(GROUPS)中应用剪裁路径</strong></font><br><br><font size="3"> 我们可以对一组SVG图形使用剪裁路径。实现的方法是将所有的图形放到一个<g>元素中,然后设置<g>元素的clip-pathCSS属性。下面是一个例子:<br> <div class="blockcode"> <div id="code_Vmb"> <ol> <li> <defs><br> <li> <clippath id="clipPath4"><br> <li> <rect x="10" y="20" width="100" height="20"></rect><br> </li> <li> </li></clippath><br> </li> <li></defs><br> </li> <li> <br> </li> <li> <g style="clip-path: url(#clipPath4);"><br> <li> <rect x="5" y="5" width="190" height="90"> <li> style="stroke: none; fill:#00ff00;"/><br> </li> <li> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle><br> </li> <li></rect> </li></g> </li> </ol> </div> <em onclick="copycode($('code_Vmb'));">复制代码</em> </div></g></g></font><br><font size="3"> 在下面左边的图像是没有使用剪裁路径的图像。右边的图像是上面代码的返回结果。</font><br><br><font size="3"><img id="_aimg_29176" aid="29176" zoomfile="data/attachment/forum/201508/13/104946hyfzk6aaafffqak8.jpg" src="data/attachment/forum/201508/13/104946hyfzk6aaafffqak8.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="4.jpg" title="4.jpg" w="476"></font><br><br><font size="3"> <strong>文字剪裁路径</strong></font><br><br><font size="3"> 我们还可以使用文字来作为剪裁路径。使用SVG<text> 来作为剪裁路径的一个好处是你可以自定义字体。下面是一个简单的文字剪裁路径的例子:<br> <div class="blockcode"> <div id="code_qgz"> <ol> <li> <defs><br> <li> <clippath id="clipPath5"><br> <li> <text x="10" y="20" style="font-size: 20px; ">This is a text</text><br> </li> <li> </li></clippath><br> </li> <li></defs><br> </li> <li> <br> </li> <li><g style="clip-path: url(#clipPath5);"><br> <li> <rect x="5" y="5" width="190" height="90"> <li> <br> </li> <li> style="stroke: none; fill:#00ff00;"/><br> </li> <li> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle> <br> </li> <li> <br> </li> <li></rect> </li></g></li> </ol> </div> <em onclick="copycode($('code_qgz'));">复制代码</em> </div></text></font><br><font size="3"> 下面左边的图像没有使用剪裁路径。右边的图像使用了文字剪裁路径。</font><br><br><img id="_aimg_29177" aid="29177" zoomfile="data/attachment/forum/201508/13/104947a2szcpuic1mkwcp4.jpg" src="data/attachment/forum/201508/13/104947a2szcpuic1mkwcp4.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" style="max-width:90%" alt="5.jpg" title="5.jpg" w="469"><br><br><font size="3"> </font><font size="2"><font color="gray"> 本文版权属于jQuery之家,转载请注明出处:<a href="http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507032160.html" target="_blank">http://www.htmleaf.com/ziliaoku/ ... g/201507032160.html</a></font></font><br><br>