javascript - Raphael Canvas 覆盖 css

Question

我正在使用 Raphael 创建基于矢量的 map 。 map 很大，所以我使用 RaphaelZPD 允许缩放和平移，同时将图像适合较小的框架。我使用 html5 创建了一个 div 集作为一个带有圆 Angular 的表格单元格和 css 文件中设置的一些插入框阴影。我已经将我的 Raphael Canvas 标识为与 div 相同，虽然它可以很好地加载，但可以正确显示所有图形，所有动画元素都可以正常工作，保持在边界内等。还有一个小问题。 SVG 覆盖了 css 中设置的圆 Angular 和 inset box-shadow 属性。所以我得到的不是圆 Angular 而是尖 Angular 。如果我平移 map 以便没有 Raphael 生成的图形覆盖 Angular ，则圆 Angular 会再次出现。阴影也是如此。

那么有没有办法让js留在这些效果后面呢？或者我应该尝试通过创建倒圆 Angular 作为保留在顶层的绝对元素来绕过它而忘记阴影吗？

我希望我清楚我的问题，获得了一周的编程经验，所以我的术语仍然有点不稳定。

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

我在你的 map 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;
}

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

http://jsfiddle.net/9w2ub/