Question

我创建了一个自定义SVG控件，它包含一个代表32小时的时间线（从当天起24小时加上前一天的8小时）。在时间线上叠加了两个滑块，可以拖动它们来设置开始时间和结束时间，在这两个滑块之间显示数据，否则显示在Web应用程序中的位置。

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>

现在，当您在“SliderRect”，“SliderStartLine”或“SliderEndLine”上进行操作时，我会挂钩mousemove事件并使用它来确定在JavaScript中设置开始时间，结束时间和持续时间变量的位置。然后我调用另一个相应定位“TimeSlider”的函数。它看起来像这样：

TimeSlider.setAttribute('x', newXVal);
TimeSlider.setAttribute('width', newWidthVal);

StartLabel.textContent = newStartVal;
EndLabel.textContent = newEndVal;
DurationLabel.textContent = newDurationVal;

这一切都很完美，所以不要担心我指定的那些值，它们是正确的。唯一的问题是，当新的位置被绘制到屏幕上时，旧的位置在屏幕上“重影”，并且它们一直保持在那里直到鼠标事件被触发。此外，SliderRect在宽度更改时不会重新调整为TimeSlider的100％。我能用以下方法解决这个问题：

SliderRect.setAttribute('width', '100%');

但这不应该是必要的。这两个问题都只发生在Chrome / Win7和Safari / Win7上。它不会发生在IE9 / FF9 / Opera中。

有什么想法吗？

编辑：另外，我注意到拖动“SliderEndLine”时没有重影。只有当拖动“SliderRect”或“SliderStartLine”时才会让人相信问题必须与“TimeSlider.setAttribute（'x'，newXVal）;”

使用JavaScript事件定位SVG元素时，重新绘制WebKit浏览器中的问题

0 个答案: