响应式 SVG 图像蒙版答案

【问题标题】：Responsive SVG image mask响应式 SVG 图像蒙版
【发布时间】：2014-07-18 22:46:33
【问题描述】：

我使用 SVG 作为图像掩码，但我不知道如何在调整页面大小时使 SVG 改变其大小。当我更改窗口大小时，SVG 内的图像会调整大小，但 SVG 不会。关于如何解决这个问题的任何想法？

这是 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%" />

【问题讨论】：

网址svg和横幅png请

标签： css html svg

【解决方案1】：

您需要做的就是在您的掩码声明中使用掩码。应该可以的。

.maskHome {
    mask: url("../img/maskHome.svg#maskHome") center center / cover;
    -webkit-mask-image: url("../img/maskHome.svg") center center / cover;
    height:100%;
    width: 100%;
}

【讨论】：