Question

我刚刚开始使用RaphaelJS（虽然我熟悉SVG）并且正在尝试在多个图像上实现自定义叠加。我的图像是这样组织的（ID仅供参考）：

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

每<li>个<ul>，<ul>每个<div>

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

1-单张纸，用于兄弟div至“父母”中包含的整个div。“
每个span作为兄弟span到“图像持有者”的纸张为2 - 1张 3-作为“父母”的孩子，整个div的单张纸完整div的4张单张纸作为body的顶级子项。

在所有情况下，svg都低于覆盖（或根本不可见）的svg。我假设这与所涉及的元素上的inline vs block显示有关，但我不确定。

Answer 1

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

更强大的解决方案是创建一个新论文作为每个span的兄弟，否则点击事件将不会注册，因为svg元素将位于您的锚点<a></a>之上。 / p>

试试......

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魔法。

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

1 个答案: