我们的应用程序使用 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;
}
提前感谢您的任何见解或帮助!