SVG之裁剪和蒙版

最新推荐文章于 2024-09-13 08:57:46 发布

MAXLZ

最新推荐文章于 2024-09-13 08:57:46 发布

阅读量1.7k

点赞数

分类专栏：【Web前端】SVG 文章标签： SVG SVG裁剪 SVG蒙版 SVG动画

本文链接：https://blog.csdn.net/qq_33635385/article/details/89440291

版权

【Web前端】SVG 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、SVG裁剪

svg裁剪使用<clipPath>标签创建裁剪图形。如下利用折线路径实现的五角星裁剪：

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="683">
    <defs>
        <clipPath id="clipPath">
            <polygon points="512,250 572,430 422,310 602,310 452,430"/>
        </clipPath>
    </defs>
    <image width="1024" height="683" xlink:href="./img/car.jpg" clip-path="url(#clipPath)"></image>
</svg>

利用以上裁剪效果可实现下列动画：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .visiable #clipPath polygon {
            transform:scale(2);
            transform-origin:50% 50%;
            animation: circle 1s linear forwards;
        }
        @keyframes circle {
            to {
                transform: scale(20);
            }
        }
    </style>
<body>
<div class="svg-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="683" id="image">
        <defs>
            <clipPath id="clipPath">
                <polygon points="512,250 572,430 422,310 602,310 452,430" />
            </clipPath>
        </defs>
        <image width="1024" height="683" xlink:href="./img/car.jpg" clip-path="url(#clipPath)"></image>
    </svg>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(".svg-wrapper").on("click",function () {
        $(this).toggleClass("visiable");
    });
</script>
</body>
</html>

二、SVG蒙版

使用<mask>标签可创建蒙版。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
        .mask{
            width: 1000px;
            background-color: #261632;
        }
</style>
<body>
<div class="mask">
    <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600">
        <defs>
            <linearGradient id="linearGradient" gradientUnits="userSpaceOnUse" x2="1000" y2="0">
                <stop offset="0" stop-color="#ffffff" stop-opacity="0"></stop>
                <stop offset="0.25" stop-color="#ffffff" stop-opacity="0.25"></stop>
                <stop offset="1" stop-color="#ffffff" stop-opacity="1"></stop>
            </linearGradient>
            <mask id="mask" maskUnits="userSpaceOnUse">
                <rect width="1000" height="600"  fill="url(#linearGradient)"/>
            </mask>
            <text x="500" y="300" id="text" font-family="Arial Black" font-size="60" font-weight="bold" text-anchor="middle">这是一个蒙版测试</text>
        </defs>
        <use xlink:href="#text" fill="#FFDD00" mask="url(#mask)"></use>
    </svg>
</div>
</body>
</html>