Raphael canvas覆盖css

Question

我正在使用Raphael创建一个基于矢量的地图。地图比较大，所以我使用RaphaelZPD来缩放和平移，而将图像放入较小的框中。我已经使用html5创建一个div集作为一个圆角的表格单元格和一些嵌入框阴影设置在CSS文件中。我已经将我的Raphael画布与div相同，并且加载得很好，显示所有图形正确，所有动画元素正常工作，保持在边界内等，但仍然存在一个小问题。 SVG覆盖CSS中设置的圆角和插入框阴影属性。所以，而不是圆角我得到尖锐的角落。如果我平移地图，以便Raphael不会将图形覆盖角落，则会再次出现圆角。阴影也一样。

那么有没有办法让js留在这些效果之后呢？或者我应该尝试通过创建反转的圆角作为绝对元素来停留在顶层并忘记阴影？

我希望我对自己的问题很清楚，得到了一个好的一周的编程经验，任何类型的编程经验都依然不稳定。

http://jsfiddle.net/cgnrh/4/ < - 联系实际的图像，也很凌乱

#map { 
    display: table-cell; 
    position: absolute; 
    margin-top: 104px; 
    margin-left: 350px; 
    border-radius: 0 2em 2em 0; 
    box-shadow: inset 3px 0 7px #777; 
    width: 550px; 
    height: 900px; 
    background: #FFFFFF; 
} 

var paper = Raphael('map'); 

Answer 1

我缠你的地图的div一个div：

<div id="frame"> 
    <div id="map"> 
    </div> 
</div> 

然后，我改变位置从绝对到相对上#map并添加框架样式：

#frame { 
    position: relative; 
    top: 104px; 
    left: 350px; 
    overflow:hidden; 
    border-radius: 0 2em 2em 0; 
} 

通过应用th e圆角到包裹div并隐藏溢出，它会在地图图像上创建圆角。我相信你的假设是正确的，拉斐尔SVG渲染的效果是在绘制div的效果，所以你只需要用一个周边div来约束它。将位置从绝对位置改变为相对位置，并且在包裹div上使用定位对于将其置于与之前相同的位置是必要的。我不认为你能够实现嵌入的盒子阴影。

http://jsfiddle.net/9w2ub/