是否可以用 RaphaelJS 覆盖 Span/UL/LI

Question

我刚刚开始使用 RaphaelJS（尽管我熟悉 SVG），并尝试在许多图像上实现自定义叠加。我的图像组织如下（id仅供参考）：

<div id="parent">
   <ul>
      <li>
         <a>
           <span id="imageholder">
              <img>

每个

有6个
• 和10个
  code> per

基于特定的数据标准，我想在此集合中的图像子集上放置动态叠加层。我尝试了几种不同的技术：

1- 将兄弟 div 中包含的整个 div 放在“父级”中。
2- 每个 span 1 篇论文作为“imageholder”的同级 span。
3- 整个 div 的单篇论文作为“父级”的子级。
4- 整个 div 的单个 Paper 作为 body 的顶级子级。

在所有情况下，svg 都位于要覆盖的下方（或者根本不可见）。我假设这与所涉及元素上的内联与块显示有关，但我不确定。

Answer 1

这更像是 CSS 问题，而不是 js/raphael 问题。

更强大的解决方案是为每个 span 创建一个新论文作为同级文件，否则点击事件将不会注册，因为 svg 元素将位于锚点 的顶部。。

尝试...

ul li a {
  display: inline-block;
  position: relative;
}

ul li a span.raphael {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

为了降低调试复杂性，您应该首先尝试用静态 html 覆盖 div，然后您可以让 Raphael 来填充它们的 SVG/VML 魔力。