javascript - 带有填充属性的 SVG 矩形出现在包含元素插入框阴影的上方

Question

我的 SVG 有一个包含元素。这个元素有一个插入框阴影。不幸的是，当元素靠近填充的边时，它们实际上被绘制在框阴影上方而不是下方。我该如何解决这个问题？

Here is a jsFiddle showing the problem

HTML:

<div id="holder"></div>​

CSS:

#holder {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6) inset;
    margin: 10px;
    width: 200px;
    height: 200px;
}​

Javascript:

window.onload = function() {
    var r = Raphael("holder", 200, 200);

    var rect = r.rect(140, 140, 150, 150);  
    rect.attr({fill:"#fff"});    
};

Answer 1

如果您没有 SVG 而有图像，您也会遇到同样的问题。幸运的是，图像的解决方法是众所周知的:在覆盖 div 的伪元素上应用框阴影，示例:

#holder {
    margin: 10px;
    width: 200px;
    height: 200px;
    position: relative;
}

#holder:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6) inset;
}
​

http://jsfiddle.net/VxxwJ/