Можно ли наложить Span / UL / LI с RaphaelJS - PullRequest
Новая
       0

Можно ли наложить Span / UL / LI с RaphaelJS

0 голосов
/ 31 января 2012

Я только начинаю с RaphaelJS (хотя я знаком с SVG) и пытаюсь реализовать пользовательские оверлеи для нескольких изображений.Мои изображения организованы так (идентификаторы только для справки): 

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

с 6 <li> за <ul> и 10 <ul> за <div>

На основе конкретныхКритерии данных, я хотел бы разместить динамическое наложение на подмножество изображений в этой коллекции.Я попытался использовать несколько различных методов:

1 - одна бумага для всего div, содержащегося в элементе div для родителя.
2- 1 бумага для каждого span какбрат span для «держателя изображения».
3 - одиночная бумага для всего div как дочерний элемент «родителя».
4 - одиночная бумага для всего div как дочерний элемент верхнего уровня body.

Во всех случаях svg ниже того, который он должен наложить (или вообще не виден).Я предполагаю, что это как-то связано с отображением inline против block на задействованных элементах, но я точно не знаю.

1 Ответ

1 голос
/ 31 января 2012

Это скорее проблема CSS, чем проблема js / Raphael.

Более надежным решением было бы создание новой бумаги в качестве родственного элемента для каждого span, в противном случае события щелчка не будут регистрироваться, поскольку элемент svg будет располагаться поверх ваших якорей <a></a>.

Попробуйте с ... 

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;
}

Чтобы уменьшить сложность отладки, вы должны сначала попытаться наложить div на статический html, а затем можете заставить Рафаэля заполнить их магией SVG / VML.

...