本文介绍了响应式SVG图像蒙版的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用SVG作为图像遮罩,但是我不知道在调整页面大小时如何使SVG更改其大小.当我更改窗口大小时,SVG内部的图像会调整大小,但SVG不会.关于如何解决这个问题有什么想法吗?
I'm using an SVG as an image mask, but I can't figure out how to make the SVG change its size when the page is resized. When I change the window size, the image inside the SVG resizes, but the SVG doesn't. Any ideas about how to solve this?
这是SVG代码:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 480 302" enable-background="new 0 0 480 302" xml:space="preserve">
<defs>
<mask id="maskHome" maskUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M240,0C91,0,0,44,0,44v214c0,0,91,44,240,44s240-44,240-44V44C480,44,389,0,240,0z"/>
</mask>
</defs>
</svg>
CSS:
.maskHome {
mask: url("../img/maskHome.svg#maskHome");
-webkit-mask-image: url("../img/maskHome.svg");
height:100%;
width: 100%;
}
HTML:
<img class="maskHome" src="img/banner2.png" width="100%" height="100%" />
推荐答案
您需要做的就是在遮罩声明中使用Cover.应该可以.
All you need to do is use cover in your mask declaration. That should work.
.maskHome {
mask: url("../img/maskHome.svg#maskHome") center center / cover;
-webkit-mask-image: url("../img/maskHome.svg") center center / cover;
height:100%;
width: 100%;
}
这篇关于响应式SVG图像蒙版的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!