SVG элемент не сверху после перетаскивания - PullRequest
Новая
       23

SVG элемент не сверху после перетаскивания

0 голосов
/ 13 марта 2012

Я использую HighStock для графиков на моем экране. В моей серии разные флаги на случайных точках.

У меня есть требование перетаскивать флаги в любое место на графике.

вот скрипка этого http://jsfiddle.net/X7AHK/13.

Я могу перетащить флаг, но когда я опускаю флаг, я не вижу его. Элемент flag все еще находится там, где он был удален, если вы подведете курсор к этому месту, вы увидите, как значок меняется.

Я полагаю, есть проблема с наложением элемента?

1 Ответ

1 голос
/ 14 марта 2012

SVG использует "модель рисовальщиков" для своего рендеринга, что означает, что элементы, которые появляются раньше в исходном коде / DOM, всегда могут отображаться элементами, которые появляются позже в источнике / DOM. (Это в отличие от HTML, который имеет свойство z-index, позволяющее переупорядочивать элементы.)

Таким образом, если вы хотите переместить элемент в «верх», вам необходимо повторно вставить элемент в другую точку DOM. Например, см. this demo ; перетащите синие и красные поля так, чтобы они перекрывали друг друга, а затем поочередно нажмите на каждую. Это выполняется строкой 94 в исходном коде: 

el.parentNode.appendChild(el); // move to top

Комментарий слегка вводит в заблуждение, поскольку элемент не перемещается в абсолютный top , а должен быть нарисован последним из всех его братьев и сестер. Если вы посмотрите на исходный DOM, вы увидите (упрощенно): 

<svg ...>
  <g transform="scale(1.2,0.8)">
    <rect class="drag resize" ... fill="#c66"/>
    <rect class="drag resize" ... fill="#69c"/>
  </g>
  <circle class="drag sizer" ... r="5"/>
  <circle class="drag sizer" ... r="5"/>
</svg>

Таким образом, когда вы щелкаете по прямоугольнику, он переупорядочивается, чтобы стать последним дочерним элементом в группе <g>, рендеринг после другого прямоугольника в группе, но всегда рендеринг перед желтыми кругами, нарисованными над углами.

...