Question

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

那么有没有办法让js留在这些效果之后呢？或者我应该尝试通过创建倒置的圆角作为绝对元素来绕过它，它们会留在顶层而只是忘记阴影？

我希望我对自己的问题很清楚，有一个很好的一周编程经验，但我的术语仍然有点不稳定。

http://jsfiddle.net/cgnrh/4/＆lt; - 练习图片，也非常混乱

#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并隐藏溢出，它会在地图图像上创建圆角。我相信你的假设是正确的，拉斐尔SVG正在渲染div的效果就是绘画，所以你只需用周围的div来约束它。将位置从绝对位置更改为相对位置并在包装div上使用定位是必要的，以使其布局在之前的相同位置。我不认为你能够实现插入框阴影。

http://jsfiddle.net/9w2ub/

拉斐尔帆布覆盖了css

1 个答案: