将具有混合(固定和百分比)值的CSS剪辑路径转换为SVG剪辑路径
将具有混合(固定和百分比)值的CSS剪辑路径转换为SVG剪辑路径
提问于 2018-12-12 20:24:55
我有一个使用clip-path的具有渐变和剪裁角的卡片图像
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}<div class="card"></div>
被裁剪的角落必须有固定的大小，而不管卡片的大小，所以我使用像素来裁剪角落。
但是clip-path目前对浏览器的支持还不是最好，所以我试着把这个HTML和CSS转换成SVG。
.container {
width: 200px;
height: 200px;
}<div class="container">
<svg viewBox="0 0 100 100" clip-path="url(#myClip)">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<polygon points="20,0 100,0 100,100 0,100 0,20" fill="url(#grad1)" />
</svg>
</div>
但问题是，我不能使这个裁剪的角落有固定的大小，而不管卡片的大小。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-14 00:18:04
在使用SVG mask的Stack Overflow in Russian的帮助下，我的解决方案是
.container {
width: 200px;
height: 200px;
}
svg {
width: 100%;
height: 100%;
}<div class="container">
<svg>
<defs>
<mask id="triangle-clip">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path d="M0,20 v-20 h20 z" fill="#000" />
</mask>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" mask="url(#triangle-clip)" />
</svg>
</div>
Stack Overflow用户
发布于 2018-12-13 08:56:50
为了保持它的固定大小，你不能在你的SVG上使用viewBox。只要剪掉你需要的角，让其他角延伸很长的距离，这样它就可以覆盖你可能需要的任何大小。在下面的示例中，我将剪辑路径扩展到(10000,10000)。
在这里，我们将梯度应用于100% x 100% <rect>。这是为了使渐变始终缩放以适合屏幕。然后，我们将剪辑路径应用于矩形以获得凹口。
html, body {
height: 100%;
}
.container {
width: 50%;
height: 50%;
}<div class="container">
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
<clipPath id="clip1">
<polygon points="20,0 10000,0 10000,10000 0,10000 0,20"/>
</clipPath>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" clip-path="url(#clip1)"/>
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53742988
复制相关文章
相似问题