带有填充属性的SVG矩形显示在包含元素的上方插入框阴影

SVG rect with fill attribute appears above containing elements inset box shadow

本文关键字：方插入 插入 元素 阴影 属性 填充 SVG 显示 包含      更新时间：2023-09-26

我的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"});    
};

如果不是使用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/

在有阴影的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"});    
};

​结果是这样的。

相关文章：