У меня есть собственный элемент управления SVG, который я создал и который состоит из временной шкалы, представляющей 32 часа (24 часа с текущего дня и 8 часов с предыдущего дня).На временной шкале наложены два ползунка, которые можно перетаскивать, чтобы установить время начала и время окончания, между которыми отображаются данные в другом месте веб-приложения.
SVG и JavaScript довольно длинные и сложныетак что я пока просто опубликую базовую структуру.Я опубликую более подробную информацию, если потребуется.SVG содержит вложенные SVG-элементы и выглядит немного сумасшедшим, но выглядит это примерно так:
<svg width="100%" height="100%" shape-rendering="crispEdges">
<svg id="TimeLineAdjust" x="1.5%" width="97%" overflow="visible">
"Some static stuff that draws out the time line..."
</svg>
<svg id="TimesContainer" x="1.5%" y="0" width="97%" height="100%" shape-rendering="geometricPrecision">
"Various labels and buttons and such..."
<text id="StartLabel"></text>
<text id="EndLabel"></text>
<text id="DurationLabel"></text>
</svg>
<svg id="TimeSlider" y="0" height="100%" overflow="visible">
<defs>
<polygon id="DefMarker" points="-0.5,77.5 -0.5,23.5 9.5,23.5 9.5,32.5 0.5,41.5 0.5,77.5" style="fill:rgb(0,0,255);stroke:rgb(0,0,255);stroke-width:1" />
</defs>
<rect id="SliderRect" x="0%" y="41.5" width="100%" height="36" style="stroke:none;opacity:0.5;fill:rgb(0,0,255)" />
<use id="SliderStartLine" x="0%" transform="scale(-1,1)" xlink:href="#DefMarker" />
<use id="SliderEndLine" x="100%" xlink:href="#DefMarker" />
</svg>
</svg>
Теперь, когда вы mousedown либо "SliderRect", "SliderStartLine" или "SliderEndLine", я цепляюсь засобытие mousemove и используйте его, чтобы определить, какие переменные времени начала, времени окончания и продолжительности можно найти в моем JavaScript.Затем я вызываю другую функцию, которая позиционирует «TimeSlider» соответственно.Это выглядит так:
TimeSlider.setAttribute('x', newXVal);
TimeSlider.setAttribute('width', newWidthVal);
StartLabel.textContent = newStartVal;
EndLabel.textContent = newEndVal;
DurationLabel.textContent = newDurationVal;
Все это прекрасно работает, поэтому не беспокойтесь о тех значениях, которые я присваиваю, они правильные.Единственная проблема заключается в том, что, когда новые позиции отображаются на экране, старые «поблескивают» по экрану и остаются там до тех пор, пока не будет запущено событие mouseup.Кроме того, SliderRect не изменяет масштаб до 100% TimeSlider при изменении его ширины.Я смог решить эту проблему с помощью:
SliderRect.setAttribute('width', '100%');
Но это не должно быть необходимым.Обе эти проблемы возникают только в Chrome / Win7 и Safari / Win7.Этого не происходит в IE9 / FF9 / Opera.
Есть идеи?
Редактировать: Кроме того, я заметил, что при перетаскивании «SliderEndLine» нет никаких ореолов.Только при перетаскивании «SliderRect» или «SliderStartLine», что приведет к убеждению, что проблема должна быть в «TimeSlider.setAttribute ('x', newXVal);"