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

結果はこんな感じ。