代码之家 › 专栏 › 技术社区 › 4frag

基于svg的带有div边界的裁剪图像

svg css html

4frag · 技术社区 · 2 年前

我正在建立一个网站,所以我需要创建一个将剪辑图像的蠕动块

body {
    margin: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: Roboto;
    background-color: #efeff4;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body::-webkit-scrollbar {
    display: none;
}

.main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.model {
    width: 100%;
    height: 107.5px;
}

.model-photo-block {
    height: 100%;
    margin-left: auto;
}

.model-photo-back {
    height: 100%;
    margin-left: auto;
}

.squircle-38-5-parent {
    position: relative;
    width: 100%;
}

.squircle-38-5 {
    position: absolute;
    width: 100%;
}

.squircle-content {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.text-block {
    display: flex;
    flex-direction: column;
}

.text-40-bold {
    font-size: 15.15px;
    font-weight: 600;
}

.text-70-bold {
    font-size: 26.5px;
    font-weight: 600;
}

.width-55 {
    width: calc(100% - 41.67px);
}

.color-727272 {
    color: #727272;
}

.margin-left-62 {
    margin-left: 23.48px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <div class="model squircle-38-5-parent width-55">
        <svg fill="none" xmlns="http://www.w3.org/2000/svg" class="squircle-38-5" style="height: 108px;">
            <g>
                <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" rx="42.77"></rect>
            </g>
        </svg>
        <div class="squircle-content">
            <div class="text-block margin-left-62">
                <span class="text-70-bold">Air Jordan 1</span>
                <span class="text-40-bold color-727272">high, mid, low</span>
            </div>
            <div class="model-photo-block">
                <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNDQcNBwcHBwcHBxYHBwcHBw8ICQcKIBEWIiARFR8YKCggGBolJx8fITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0NGg0NDisZHxktKysrKysrLSsrKysrKysrKysrKy0rKy0tKysrKysrKzctLSs3KysrKysrKysrKysrK//AABEIAKgBLAMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAABAAIGBf/EABUQAQEAAAAAAAAAAAAAAAAAAAAB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwcC/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIRAxEAPwDh6iGMtSkgEGyxJAKNljSyGgXLEkAg2WJIBBcsSQGgbLEllEFyxpAINliSA0C5YksqkGyxJAILliSAUbLGlkNAuWJIBBssSQCC5YkgNA2WJIBBcsaQCjDEl74aCM5aspAIKMSQCDZYkgNAuWJLKINliSAQXLGkAo2WJLIaBssSQDQXLEkAg2WJIDQLljSAQbLEkAguWJIDQNliSyiC5YkgEGyxJAKLljSyiDZYkgEFGJLoAUjOWrKWQ0DZYkigguWJIBRssaWQ0C5YkgEGyxJAILliSA0DZYksoilyxJAINljSAUXLEllEGyxJAILliSAQbLEkBoGyxpAILliSAQbLEkBoFyxJZRBRiS6AEIzlqykBoGyxJZRBcsaQCDZYkgFGyxJZRBcsSQCDZYkgFFyxpZDQNliSAQXLEkAg2WJIDQLliSyiDZY0gEFyxJAaBssSWaiC5YkgEGyxJAKLljSyiDDEl0AIRnLVlIBRcsSWQ0DZYkgEFyxJAINliSA0C5Y0gEGyxJAILliSAUbLEllEUuWJIBoNljSAUbLElkNAuWJIBBssSQCC5YkgVoGyxJAILljSAQbLEkBoFGJLoAQjOWrKQCDZYkgNAuWJLKINljSAQXLEkAo2WJLIaBcsSQCDZYkgEFyxJAaBssaQCC5YkgEGyxJAaBcsSWUQbLEkAg2WNIBRRiSyiDZYkgEFyxJAIKMaXQIhGctWEgEGyxJAKLljSyGgbLEkAguWJIBBssSQGgbLEllEFyxpAINliSAUXLEllEGyxJAILliSAUbLGlkNAuWJIBBssSQCC5YkgNA2WJLKILljSAQYYkugDQqM5aspAILliSAQbLEkAouWJLIaBssSRQQXLGkAo2WJLIaBcsSQCDZYkgEFyxJAaBssaWUQbLEkAguWJIBRssSWQ0C5YkgEGyxJAKLljSzQ0DZYkgEFGJLoAUjOWrKWQ0KXLEkAg2WJIBBssaQGgXLEllEGyxJAILliSA0DZYksoguWNIBBssSQCi5YkshoGyxJAILliSAQbLEkBqguWNLKINliSAQbLEkBoFyxJZqIKMaXQAhGctWEgNA2WNLKILliSAQbLEkAouWJLIaBhiSAQXLEkAo2WNLNDQNliSAQXLEkAg2WJIBRcsSWUQbLGkAguWJIBqpssSWQ0C5YkgEGyxJAKLljSyiDDEl0ASRnNWGAkbMbASLmJoJGzEwEi5iYCRiJhBFzE0KkbMbASLmJgFGzEwEi5iYCRsxMAouY2AkbMTASLmJgJGzEwgjETQSKRsAopE3/2Q==" alt="back" class="model-photo-back">
            </div>
        </div>
    </div>
</body>
</html>

这里有很多css类,所以它们中的大多数都需要设置边距,所以不要注意它

在这里,我创建了一个svg块,上面有一些内容按文本或图像划分的内容。所以我想通过蠕动边界将图像剪辑到“模型照片块”中

我该怎么做?

0 回复 | 直到 2 年前

4frag 2 年前

我使用clipPath解决这个问题如果您遇到这个问题,您应该做的就是将此代码添加到svg中

<defs>
    <clipPath id="squircle">
        <!-- here place your svg rule. following correct for my svg -->
        <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" rx="42.77"></rect>
    </clipPath>
</defs>