0

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

我们注意到，在 IE9（不能在任何其他浏览器中重现）中，箭头有时会“渗出”，并且可以通过显示在 SVG 顶部的部分对话框中看到。这些通过单击对话框上的不同位置出现和消失。

我一直无法确定是什么原因造成的，但它是可以重现的。效果可以在这个 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;
}

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

4

1 回答 1

0

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

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

</path>

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

于 2014-02-26T10:49:58.540 回答