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

私はまったく同じ問題に直面しました。偶然にも、パス要素の opacity-style を設定することで回避できることがわかりました。そこで、フィドルを次のように変更しました。

<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 に答える