html 自定义SVG图像的剪切路径

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 自定义SVG图像的剪切路径相关的知识，希望对你有一定的参考价值。


<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CSS &amp; SVG Clipping Demo #3</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

    </head>
    <body>
        <style>
            .svg-clipped {
                -webkit-clip-path: url(#svgPath);
                clip-path: url(#svgPath);
            }
        </style>
        <img class="svg-clipped" src="flowers.jpg" alt="Cherry Blossoms.">
        <svg height="0" width="0">
            <defs>
                <clipPath id="svgPath">
                
<path d="M229.073,17.905c0,0 91.458,-58.344 160.052,37.845c68.594,96.19 134.034,186.86 -33.114,182.918c-167.149,-3.943 -445.467,-62.287 -327.201,-122.996c118.265,-60.71 200.263,-97.767 200.263,-97.767Z" style="fill:none;stroke:#000;stroke-width:0.75px;"/>
                </clipPath>
            </defs>
        </svg>
    </body>
</html>

以上是关于html 自定义SVG图像的剪切路径的主要内容，如果未能解决你的问题，请参考以下文章

自定义 SVG 形状剪辑路径图像

iOS：从 UIBezierPath 创建图像剪切路径

动态添加带剪切路径的SVG

Photoshop 自定义形状到 SVG 路径字符串

如何在svg中剪切图像

为啥这个 SVG 投影过滤器在路径很短时会剪切路径？