當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

(翻译)css和svg中的clipping（裁剪）

發布時間：2023/12/29 综合教程 30 生活家

生活随笔收集整理的這篇文章主要介紹了 (翻译)css和svg中的clipping（裁剪）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者是個黎巴嫩的美女，嘿嘿。原文地址：http://sarasoueidan.com/blog/css-svg-clipping/ 。我翻譯了一部分。

css和svg有很多地方相似，今天我們的css就有很多地方是從svg來的，其中一個就是clipping操作。css和svg都允許我們對元素進行clip操作，以使元素變成特定的不規則形狀。

請注意，這篇文章的例子可能在你的瀏覽器上不會起作用。所以請查看這個兼容性報告。

What Is Clipping?

clipping是一種能夠讓你全部或局部隱藏元素圖像的操作。被修剪的元素可以是任何容器或圖像元素。元素顯示的或隱藏的部分由clipping path決定。

比如效果

svg文件

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1500px" height="800px" viewBox="0 0 1500 400" enable-background="new 0 0 1500 800" xml:space="preserve">
<image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5532 0 0 0.5532 56.1025 62.7842)">
</image>
<g>
    <defs>
        <path id="SVGID_1_" d="M1167.578,93.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303
            c36.88,18.17,83.217,61.54,101.34,81.379c19.146,20.961,22.49,58.347,17.657,79.559c-8.793,38.584-104.193,61.551-143.38,67.075
            c-41.948,5.916-159.901-0.019-191.348-28.405c-21.392-19.311-9.722-104.656-0.767-132.048
            C1095.412,115.014,1144.917,99.146,1167.578,93.518z"/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
    </clipPath>
    <g clip-path="url(#SVGID_2_)">
        <defs>
            <rect id="SVGID_3_" x="1019" y="62" width="441" height="276"/>
        </defs>
        <clipPath id="SVGID_4_">
            <use xlink:href="#SVGID_3_"  overflow="visible"/>
        </clipPath>
        <g transform="matrix(1 0 0 1 0 -3.814697e-006)" clip-path="url(#SVGID_4_)">
            
                <image overflow="visible" width="800" height="500" xlink:href="your image" transform="matrix(0.5519 0 0 0.5519 1019.1992 61.7114)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="none" stroke="#000000" stroke-width="1.7043" stroke-miterlimit="10" stroke-dasharray="8.5114,8.5114" d="
        M692.578,94.518c23.562-5.852,53.741-8.445,53.741-8.445s62.447-5.133,77.539,2.303c36.88,18.171,83.217,61.54,101.34,81.379
        c19.146,20.961,22.49,58.348,17.657,79.56c-8.793,38.584-104.193,61.551-143.38,67.075c-41.948,5.916-159.901-0.019-191.348-28.405
        c-21.392-19.311-9.722-104.656-0.767-132.048C620.412,116.014,669.917,100.146,692.578,94.518z"/>
</g>
<g id="layer1" transform="translate(-166.9787,-302.08511)">
    <path id="path3009" d="M961.748,396.576c2.535-0.148,4.486-2.119,4.352-4.407c-0.133-2.287-2.299-4.016-4.836-3.867l-3.251,0.127
        c-2.903,0.171-5.362-0.773-5.827-2.162c-0.082-0.266-0.063-0.519-0.045-0.791c0.297-1.433,2.631-2.656,5.535-2.827l3.243-0.252
        c2.536-0.148,4.487-2.119,4.352-4.406c-0.133-2.288-2.299-4.016-4.837-3.868c-2.534,0.149-4.472,2.119-4.339,4.405
        c0.063,1.035,0.535,1.956,1.271,2.64c-3.787,0.26-7.001,1.457-8.549,3.016l-16.073-5.058c-4.482-0.77-5.166,1.773-5.31,1.996
        L944,386.349l-15.844,7.123c0.171,0.204,1.145,2.649,5.508,1.362l15.373-6.895c1.72,1.367,5.049,2.181,8.841,1.997
        c-0.651,0.766-1.014,1.735-0.953,2.771C957.057,394.994,959.212,396.724,961.748,396.576z M961.73,395.4
        c-1.79,0.105-3.318-1.231-3.409-2.775c-0.091-1.543,0.987-3.218,2.779-3.322c1.792-0.105,3.613,1.4,3.704,2.943
        C964.893,393.789,963.52,395.295,961.73,395.4z M960.64,381.423c-1.792,0.104-3.06-1.433-3.15-2.977
        c-0.088-1.542,1.272-3.048,3.063-3.152c1.791-0.105,3.33,1.229,3.422,2.774C964.065,379.611,962.43,381.318,960.64,381.423
        L960.64,381.423z"/>
</g>
<text transform="matrix(1 0 0 1 222.7568 432.0273)" font-family="'Angelina'" font-size="40">Object</text>
<text transform="matrix(1 0 0 1 701.3027 432.0273)" font-family="'Angelina'" font-size="40">Clipping Path</text>
<text transform="matrix(1 0 0 1 1151.085 432.0273)" font-family="'Angelina'" font-size="40">Clipped Object</text>
<text transform="matrix(1 0 0 1 517.3511 237.4595)" font-family="'LaoUI'" font-size="80">+</text>
<text transform="matrix(1 0 0 1 978.2168 237.4595)" font-family="'LaoUI'" font-size="80">=</text>
</svg>

注意，你需要自己改下圖片的路徑才能用。原來的路徑是base64,太長了，我刪了。

clipping path限定了一個區域，在這個區域內的圖像就會被顯示，而在之之外的就不會顯示。這個區域被稱之為clipping region。

更確切的說，任何在這區域外的元素部分都不會被渲染，包括內容content,背景，邊框，文飾text decoration,outline和這個the clipping path所用的可見的滾動機制。

這些東西在后代元素中也不會被渲染。

Clipping In CSS – The`clip-path`Property

clip-path是css遮罩模塊（CSSMasking Module）的一部分，而clipping操作從2000年起就是svg的一部分了，而且clipping操作已經被納入css遮罩模塊中，以使我們在對html元素修剪(clip)的時候就和對svg元素的一樣。

clip-path屬性是用來指定將被應用到元素上的修剪路徑，用clip-path,你可以指定SVG<clipPath>中路徑的屬性值。

你還可以通過指定CSS Shapes module中的基本形狀（basic shapes）來限定修剪路徑。

這些形狀可以用shape functions來創建，比如polygon(),circle(),inset()，ellipse()

用clip-path是修剪路徑作用于元素是非常簡單，直接的。

/* Referencing an SVG clipPath */
.element {
    clip-path: url(#svgClipPathID);
}
 
/* Using a CSS basic shape function */
.element {
    clip-path: polygon(...); /* or one of the other shape functions */
}

比如，我們用polygon()來限定多邊形的修剪路徑，然后把它應用到圖片上，代碼如下：

img {
    clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
}

效果：live demo

基本的shape functions只能讓我們創建有限數量的形狀，這些形狀中最復雜的是多邊形。

如果你想創建更復雜的形狀，可以用SVG<clipPath>元素。SVG<clipPath>可以讓你創建任意隨意的形狀，然后將其用做修剪路徑。

比如：

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

修剪路徑：

我們將SVG<clipPath>應用到圖片上

img {
    clip-path: url(#svgPath);
}

效果：live demo

<clipPath>可以包含任意數量的基本形狀（<rect>,<circle>, etc.），<path>，甚至是<text>。

在<clipPath>里用<text>作修剪路徑，最棒的一點是你可以指定text里的font-family.

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="230px" font-weight="700" font-style="italic"> Blossom </text>
        </clipPath>
    </defs>
</svg>

我通過設置textLength,將text的寬度和圖片的寬度設成一致.用<text>中的x,y坐標來定位。

注意，這里的x,y坐標是以文字的左下角為原點的。

效果：live demo

下面,我讓<clipPath>包含多個基本形狀。

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40" />
            <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"/>
            <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"/>
            <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644"/>
            <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17"/>
            <!-- more circles... -->
        </clipPath>
    </defs>
</svg>

效果：live demo

（完）

如果是知道點flash的人都知道，這個就是flash里面的遮罩嘛。

qq空間里面的動感影集的圖片的切換效果就用的遮罩。

那切換效果簡直是相當的炫目，而且變化很多。qq空間里面的效果就有21種。

我隨便放一個所謂的遮罩，大家就會瞬間秒懂。

這顯然比用js的動畫庫的簡單的多，更容易去做。

而上面講的用svg去做不規則的遮罩，這個提供了一個新思路。你可以動態的改變svg，還有他的參數達到類似的動畫效果。

另外,html5 的canvas也有類似的效果。用到了個很好的html5庫easel js.

尼瑪，他的官網經常上不去，不過github上的去https://github.com/CreateJS/EaselJS

效果

轉載請注明TheViperhttp://www.cnblogs.com/TheViper

總結

以上是生活随笔為你收集整理的(翻译)css和svg中的clipping（裁剪）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： cf可交易的宝箱怎么获得(穿越火线CF官
下一篇： linphone 调试信息

综合教程

(翻译)css和svg中的clipping（裁剪）

What Is Clipping?

Clipping In CSS – Theclip-pathProperty

總結

Clipping In CSS – The`clip-path`Property