svg阴影不会出现

Question

我在为应用了掩码的svg设置阴影时遇到了问题。这是代码和jsfiddle：http://jsfiddle.net/3kxnmhfL/

.watch-video-svg {
width: 50px;
height: 50px;
}

<div class="watch-video-svg">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" height="100%" width="100%" viewBox="0 0 100 100">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
<mask id="cut-off-bottom">
<circle cx="50%" cy="50%" r="50%" fill="white"/>
<polygon points="31,20, 31,77, 80,50" fill="black"/>
<!-- <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  /> -->
</mask>
</defs>
<circle cx="50%" cy="50%" r="50%" fill="red" mask="url(#cut-off-bottom)" filter="url(#shadow)" />
</svg>
</div>

我希望阴影只出现在svg圆周围，而不包含div。

影子没有出现的原因是什么？

Answer 1

SVG过滤器有一个"过滤器区域"。过滤器区域定义浏览器用于存储过滤器结果的像素区域。默认的过滤器区域是元素(应用过滤器的元素(的边界加上其周围的空白，以允许过滤器元素的结果大于原始元素。

默认情况下，该边距为宽度和高度的10%，应用于所有四边。但是，在您的情况下，"4"的stdDeviation会导致模糊扩展到超过10%的裕度。结果是剪切模糊，即使viewBox已经被放大到足以满足全模糊。

要解决这个问题，您只需要增大过滤器区域的大小。20%的津贴似乎还可以：

<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

此外，我还通过去掉不必要的掩码简化了SVG。我还调整了viewBox以包括向左延伸的模糊部分。

.watch-video-svg {
width: 500px;
height: 500px;
background: linen;
}

<div class="watch-video-svg">
<svg xmlns="http://www.w3.org/2000/svg"  height="100%" width="100%" viewBox="-5 0 120 120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" filter=url(#shadow) />
<polygon points="31,20, 31,77, 80,50" fill="white"/>
</svg>
</div>

Answer 2

您需要调整您的掩码。由于你的元素已经是一个圆了，你不需要在遮罩中有一个圆，一个矩形来填充所有的宽度/高度就足够了。

你还需要调整viewBox为阴影留出一些空间：

.watch-video-svg {
width: 50px;
height: 50px;
}

<div class="watch-video-svg">
<svg xmlns="http://www.w3.org/2000/svg"  height="100%" width="100%" viewBox="0 0 120 120">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
<mask id="cut-off-bottom">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<polygon points="31,20, 31,77, 80,50" fill="black"/>
</mask>
</defs>
<circle cx="50" cy="50" r="50" fill="red" mask="url(#cut-off-bottom)" filter=url(#shadow) />
</svg>
</div>