通过覆盖内容显示的 SVG 标记 (IE9)

Question

我们的应用程序使用 SVG 来呈现有向图，使用 <path> 元素上的 marker-end 属性来显示方向的箭头。我们还使用 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 marker-end="url(#arrowhead)" d="M 30 30 H 100" 
style="stroke-width: 3px; stroke: #000; opacity:0.9999;">

</path>

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