8

svgで初めて作業します。「矢印のような」パスの次のsvg定義があります

<defs>
    <marker id="start" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
        <path id="conditional"   d="M 0 6 L 8 1 L 15 5 L 8 9 L 1 5" fill="white" stroke="black" stroke-width="1" />
        <path id="default" d="M 5 0 L 11 10" fill="white" stroke="black" stroke-width="1" />
    </marker>
    <marker id="end" refX="15" refY="6" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="12" orient="auto">
        <path id="arrowhead" d="M 0 1 L 15 6 L 0 11z" fill="black" stroke="black" stroke-linejoin="round" stroke-width="2" />
    </marker>
</defs>
<g id="edge">
    <path id="bg_frame" d="M10 50 L210 50" stroke="black" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#start)" marker-end="url(#end)" />
    <text id="text_name" x="0" y="0" oryx:edgePosition="startTop"/>
</g>

ただし、IE 9 または IE 10 では、パスの最後に矢印が表示されません。

'triangle' は IE でサポートされていないか、コードに問題がありますか?

ここの例、http://www.w3.org/TR/SVG11/images/painting/marker.svgも IE では機能しません。

助けてください、それが私のワークフロー エディターが動かなくなった唯一のポイントです。

リンク結果

ここに画像の説明を入力

FF での私のコードの結果は次のとおりです。

ここに画像の説明を入力

そしてIEのコード結果は次のとおりです（矢印はなく、矢印の端に四角はありません）：

ここに画像の説明を入力

4

7 に答える 7

9

xdhmoore が彼の回答に書いたように、この問題は Microsoft に既に報告されています: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-更新しない

問題が表示されるフィドルがあります: http://jsfiddle.net/EEYZZ/

   //if (isIE10 || isIE11) {
       var parent = p1.parentNode;
       parent.removeChild(p1);
       parent.appendChild(p1);
   //}

私の回避策は、手動で DOM からノードを削除して再度追加することです。これにより、必要に応じてノードが更新されます...パフォーマンスなどについては話さないでください。( http://jsfiddle.net/kaljak/5zTv9/3/ )

于 2013-12-16T11:17:38.717 に答える
1

マーカーを使用して行を動的に移動する際に問題が発生しました。それらはページロード時に問題なく表示されますが、行の x/y 属性が変更されても移動しません。

http://social.msdn.microsoft.com/Forums/ie/en-US/f772aab3-5ce3-4367-8eec-4fe58ad94b14/urgent-serious-bug-svg-marker-is-not-updating-when-change- the-lines-xy-in-ie10?forum=iewebdevelopment

http://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

于 2013-12-03T21:59:59.817 に答える
0

要素の周りに別のグループを配置し、このグループ内でマーカーを定義すると、MS Edge などで機能します。

     <g id="maszlinie" style="marker-start: url(#pf2); marker-end: url(#pf)">
     <g id="bline" transform="translate(0,-20)">
        <line class="masz" y2="365" y1="365" x2="415" x1="15">
     </g>
     </g>
于 2016-07-13T14:24:57.710 に答える
0

これは、私にとってIE10でうまくレンダリングされるように見えました（左側の菱形と右側の三角形）。

ただし、IE のマーカーには既知の問題がいくつかあります。たとえば、IE は markerUnits="strokeWidth" をサポートしていません。

于 2013-07-15T14:31:48.577 に答える