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％，应用于所有四个侧面。但是，在您的情况下，Sub colorCells() Set range1 = Range("B1:B5") Set range2 = Range("F1:F15") For Each cel In range2 Set found = range1.Find(cel.Value, LookIn:=xlValues) If found Is Nothing Then cel.Interior.ColorIndex = 0 Else cel.Interior.ColorIndex = 3 End If Next cel End Sub中的stdDeviation会使模糊范围扩展到10％的余量。即使"4"已经放大到足以满足整个模糊的程度，结果仍然是裁剪的模糊。

要解决此问题，您只需要增大过滤器区域的大小即可。 20％的配额似乎行得通：

viewBox

此外，我通过消除不必要的蒙版简化了SVG。我还对<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">进行了调整，以包括延伸到左侧的模糊部分。

viewBox

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

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>

svg阴影未出现

2 个答案: