使用 jquery 裁剪 SVG 视图框

Question

我正在为我的客户做贴纸网站。他们需要在给定的 SVG 图像中裁剪图像。该 SVG 图像没有像万圣节脸一样变形（见下文）。

当我上传图片时，它会显示在给定的图片中。图像的其余部分将隐藏。

我怎样才能做到这一点？

Answer 1

使用 SVG clipPaths 这真的很容易。它也有很好的浏览器支持，当然除了 IE。

.defs {
    position: absolute;
    width: 0;
    height: 0;
}
.demo {
    text-align:center;
}
.star image {
    clip-path: url(#star-clip);
}
.hex image {
    clip-path: url(#hex-clip);
}
.heart image {
    clip-path: url(#heart-clip);
}
.shape image {
    clip-path: url(#shape-clip);
}

<svg class="defs">
    <defs>
        <clipPath id="star-clip">
            <polygon id="star" points="150,7.3 196.4,101.3 300,116.3 225,189.4 242.7,292.7 150,243.9 57.3,292.7 75,189.4 0,116.3 103.6,101.3" />
        </clipPath>
        <clipPath id="hex-clip">
            <polygon id="hex" points="222.5,295 77.5,295 5,150 77.5,5 222.5,5 295,150" />
        </clipPath>
        <clipPath id="heart-clip">
            <path id="heart" d="M248.078,5.883c-36.691-14.739-77.771-0.839-98.517,31.125C128.817,5.044,87.735-8.856,51.043,5.883 C9.354,22.632-10.863,70.009,5.887,111.696c16.06,39.98,143.314,139.607,143.314,139.607l0.359,0.28l0.36-0.28 c0,0,127.251-99.627,143.314-139.607C309.986,70.009,289.768,22.632,248.078,5.883z"/>
        </clipPath>
        <clipPath id="shape-clip">
            <path id="shape" d="M132.9,0.9c-12.5,1-34.7,4.4-44.9,6.7c-33.5,7.6-55.7,28.2-63.8,58.8c-1.8,6.9-2.2,9.7-2.3,20.1c0,10.5,0.2,13.3,2.3,21.6 c9.5,40.7,33.2,90.2,71.5,149.8c10.5,16.4,14.8,21.8,22.8,29.3c4.3,3.9,8.3,6.8,13,9.2l6.9,3.4h10.9c10.9,0,10.9,0,17-2.9 c7.6-3.7,14.3-8.7,21.4-16.2c6.9-7.2,10.5-12.3,21.9-30.3C248,188.7,272,134.3,277.4,96.6c1.2-8.6,0.5-22.4-1.7-31.3 c-5.6-23.4-20.8-41.2-43.6-50.9c-15.3-6.5-27.5-10-44.5-12.5C177.7,0.5,144.9-0.1,132.9,0.9z"/>
        </clipPath>
    </defs>
</svg>
<div class="demo heart">
    <svg width="300" height="300">
        <image xlink:href="http://lorempixel.com/output/city-q-c-300-300-4.jpg" width="300" height="300" />
    </svg>
</div>
<div class="demo star">
    <svg width="300" height="300">
        <image xlink:href="http://lorempixel.com/output/cats-q-c-300-300-10.jpg" width="300" height="300" />
    </svg>
</div>
<div class="demo hex">
    <svg width="300" height="300">
        <image xlink:href="http://lorempixel.com/output/people-q-c-300-300-8.jpg" width="300" height="300" />
    </svg>
</div>
<div class="demo shape">
    <svg width="300" height="300">
        <image xlink:href="http://lorempixel.com/output/nightlife-q-c-300-300-6.jpg" width="300" height="300" />
    </svg>
</div>

您需要定义 clipPath，然后将其应用于您的图像。在演示中，我创建了一个单独的 SVG 元素，其中包含所有形状作为路径或多边形定义，并使用外部样式简单地应用它们。您当然可以在单个 SVG 中执行此操作，例如：

<svg width="120" height="120">
    <defs>
        <clipPath id="shape-clip">
            <path id="shape" d="M60,117.4c-20.4,0-44.8-53.6-49-76.4C7.3,21,26.6,4.2,46.9,2.6c7-0.5,19.8-0.2,26.2,0 C93.5,3.4,112.7,21,109,41C104.8,63.8,79.3,117.4,60,117.4z"/>
        </clipPath>
    </defs>
    <image xlink:href="http://lorempixel.com/output/nightlife-q-c-120-120-6.jpg" width="120" height="120" style="clip-path: url(#shape-clip);" />
</svg>

一些注意事项：

您的 def 需要在使用前按源代码顺序定义（例如，您不能将它们放在页面末尾）。
SVG 元素定义不会显示，但它们会在呈现的页面中占据 space。我只是用 position: absolute 强制它们离开文档流，并给它们设置 0 的高度和宽度，以确保它们不会弄乱我的布局。

有关更多信息，您可能需要查看这些：

Clipping and Masking in CSS、CSS 技巧
SVG Clip Path Tutorial、Jenkov.com
Clipping, Masking and Compositing Specification, W3C

使用 jquery 裁剪 SVG 视图框

SVG view box crop using jquery

javascript

jquery

image

svg

crop