将SVG效果应用于HTML内容_Html_Css_Svg_Xhtml

将SVG效果应用于HTML内容

html css svg

将SVG效果应用于HTML内容,html,css,svg,xhtml,Html,Css,Svg,Xhtml,我正尝试按照本教程向HTML div元素添加SVG掩码：以下是相关代码： <!DOCTYPE HTML> <html> <body> <svg height="0"> <mask id="mask_1"> <linearGradient id="grad_1" x1="0" x2="0" y1="0" y2="1"> <stop off

我正尝试按照本教程向HTML div元素添加SVG掩码：

以下是相关代码：

<!DOCTYPE HTML>
<html>
<body>
    <svg height="0">
        <mask id="mask_1">
            <linearGradient id="grad_1" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0.0" stop-color="white" stop-opacity="0.0" />
                <stop offset="1.0" stop-color="white" stop-opacity="1.0" />
            </linearGradient>
            <rect x="0" y="0" width="72" height="72" fill="url(#grad_1)"/>
        </mask>
    </svg>
    <div style="left:0px;top:0px;width:68px;height:68px;background-color:#ff0000;background-size:auto;mask:url(#mask_1);">Here's some text.</div>
</body>
</html>


这里有一些文字。

但是，面具不起作用。div元素被正确渲染，减去应该使它们向顶部淡入的遮罩。我错过了什么明显的东西吗？这种方法是否只适用于XHTML而不是HTML5？谢谢。

您使用哪种浏览器？这似乎对我的Firefox/Mac有影响，但对其他人没有影响。但我刚刚在Firefox上试用过，效果不错，所以我想浏览器就是问题所在。如果那样的话，我想我将不得不放弃我的计划（可能我没有使用正确的doctype？我尝试过使用XHTML，但在Chrome中也得到了同样的失败结果。我认为你必须使用CSS掩码/渐变才能在Chrome中工作。我认为UA不支持html上的SVG渐变/渐变。