Question

我们的应用程序使用SVG渲染有向图，使用marker-end元素上的<path>属性显示方向的箭头。我们还使用jQuery UI对话框向用户呈现有关图形的可编辑信息。图形在页面上的相当大的区域中呈现，因此对话框显示在SVG内容上方。

我们注意到在IE9中（无法在任何其他浏览器中重现）箭头有时会“渗透”，并且通过SVG顶部显示的对话框部分可见。通过单击对话框中的各个位置，它们会显示和消失。

我一直无法确定导致这种情况的原因，但它具有很强的可重复性。效果可见in this jsfiddle。点击“点击此文字！”文字和箭头将在红色方块中流血。单击其他地方并返回文本会导致箭头消失并重新出现。

这个问题非常令人沮丧，我找不到能解释这种行为的任何内容。

HTML

<svg>
    <defs>
        <marker id="arrowhead" viewBox="-5 -5 30 30" refX="11" refY="9" markerUnits="strokeWidth" markerWidth="10" markerHeight="6" orient="auto">
            <path d="M 0 0 L 14 9 L 0 18 z"></path>
        </marker>
    </defs>
    <path marker-end="url(#arrowhead)" d="M 30 30 H 100" style="stroke-width: 3px; stroke: #000;"></path>
</svg>
<div id="overlay">
    <div>text</div>
    <div>click on this text!</div>
</div>
<div id="ind"></div>

CSS

#overlay {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 200px;
    background-color: #ccc;    
}
#overlay div {
    height: 20px;
}
#ind {
    position:absolute;
    top: 26px;
    left: 97px;
    border: 1px solid #f00;
    height:14px;
    width: 14px;
}

提前感谢您的任何见解或帮助！

Answer 1

我遇到了同样的问题。偶然的是，我发现解决方法是设置path元素的不透明度样式。所以我修改了这个小提琴：

<path marker-end="url(#arrowhead)" d="M 30 30 H 100" 
style="stroke-width: 3px; stroke: #000; opacity:0.9999;">

</path>

现在它并没有明显更加透明，但它以某种方式解决了闪光问题。

通过重叠内容显示的SVG标记（IE9）

1 个答案: