拉斐尔画布覆盖 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;
}

通过将圆角应用于包装 div 并隐藏溢出，它会在地图图像上创建圆角。我相信你的假设是正确的，Raphael SVG 正在渲染正在绘制的 div 的效果，所以你只需要用周围的 div 来约束它。将位置从绝对位置更改为相对位置并在包装 div 上使用定位是必要的，以使其布局在与之前相同的位置。我认为您无法实现插入框阴影。

http://jsfiddle.net/9w2ub/