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

Question

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

这是一个显示问题的jsFiddle

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/

Answer 2

在有阴影的 div 中创建另一个 div 怎么样？像

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

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

#inner {
    position:relative;
    top:10px;
    left:10px;
    width: 180px;
    height: 180px;
}

window.onload = function() {
    var r = Raphael("inner");
    var rect = r.rect(140, 140, 70, 70).attr({fill:"#fce"});    
};

结果是这样的。