indicatore svg non funziona in IE9-10

Question

Lavorando la prima volta su svg. Ho seguente definizione SVG per un percorso 'a freccia'

<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> 

Ma non mostra freccia alla fine del percorso in IE 9 o IE 10

fa 'triangolo' non supportato in IE o problema nel codice?

Anche un esempio qui, http://www.w3.org/TR/SVG11/images/painting/marker.svg non funziona in IE.

Aiuto Per favore, è l'unico punto in cui il mio editor del flusso di lavoro è rimasto bloccato.

risultato link

risultato del mio codice in FF è:

E codice di risultato in IE è (non c'è nessuna freccia, nessuna piazza alla fine della freccia):

Answer 1

Questo mi è sembrato perfetto per IE10 (forma a rombo a sinistra e triangolo a destra).

Tuttavia, ci sono alcuni problemi noti con i marcatori in IE. Ad esempio, IE non supporta markerUnits = "strokeWidth".

Answer 2

Ho riscontrato problemi di spostamento delle linee in modo dinamico con i marcatori. Si mostrano bene sul pageload, ma non si muovono quando vengono modificati gli attributi x/y delle righe.

http://social.msdn.microsoft.com/Forums/ie/en-US/f772aab3-5ce3-4367-8eec-4fe58ad94b14/urgent-serious-bug-svg-marker-is-not-updating-when-changing-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

Answer 3

Il problema è già stato segnalato a Microsoft come xdhmoore ha scritto nella sua risposta: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

C'è un violino in cui è illustrato il problema: http://jsfiddle.net/EEYZZ/

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

La mia soluzione è rimuovere manualmente il nodo dal DOM e aggiungerlo di nuovo, questo aggiornerà il nodo come desiderato ... Non parlare di prestazioni e cose, ma penso che attualmente non ci sia modo migliore per farlo. (http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 4

Mi trovavo di fronte allo stesso problema e mi causava un po 'di mal di testa: non riesco davvero a capire perché Microsoft non risolve il problema. Ho deciso di sostituire i marcatori con percorsi personalizzati che hanno il piacevole effetto collaterale che è possibile ad es. cambiare il riempimento o il colore in fase di esecuzione utilizzando JavaScript.

Ho creato il mio svg utilizzando d3, il bordo ha classe 'percorso-bordo' e il tip ha classe 'edge-tip'. Entrambi i percorsi sono figli di uno svg: g. Il bordo stesso è una spline, quindi per ruotare la punta prendo la pendenza degli ultimi 10 pixel.Questo è più o meno il codice che viene utilizzato per aggiornare la freccia, lavora a IE9-11:

edge.select('path.edge-tip') 
    // the shape of the tip 
    .attr('d', 'M0,0L10,5L0,10Z') 
    // move the tip to the end of the edge and rotate. 
    .attr('transform', function(d) { 
     var parent = d3.select(this).node().parentNode, 
      path = d3.select(parent).select('path.edge-path').node(), 
      pathLength = path.getTotalLength(), 
      point1 = path.getPointAtLength(Math.max(0, pathLength - 10)), 
      point2 = path.getPointAtLength(pathLength), 
      vect = { x: point2.x - point1.x, y: point2.y - point1.y } 
      l1 = vect.x * vect.x + vect.y * vect.y; 
     l1 = Math.sqrt(l1); 
     var angle = Math.acos(vect.x/l1); 
     angle = 360 * (angle/(2*Math.PI)); 
     if (vect.y < 0) { 
      angle = 360 - angle; 
     } 
     return 'translate(' + point1.x + ',' + (point1.y - 5) + ') rotate (' + angle +' 0 5)'; 
    }); 

forse aiuta qualcuno :)

Answer 5

Covata un altro gruppo attorno all'elemento e definendo in questo gruppo i marcatori lavora in MS Edge e altri.

 <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> 

Answer 6

Non ho potuto ottenere i marcatori per lavorare in IE11, ma in Edge funzionano. Il trucco è per SVG in linea è necessario utilizzare xml:id per i marcatori anziché solo id.

Modifica: in effetti anything:id funziona. Non so perché.

Modifica 2: Ugh. Questo rompe l'SVG in Chrome. È possibile duplicare l'ID: id="foo" edge_sucks:id="foo".

Modifica 3: Hmm zero che sembra funzionare in Edge, dopo tutto. Non ho idea di cosa sta succedendo.

Answer 7

Un problema in IE sembra essere che eredita le stroke, stroke-width e fill proprietà (contrariamente agli standard).

Tuttavia, ciò può essere risolto impostando esplicitamente le proprietà del tratto.

considerare il problema con

http://www.w3.org/TR/SVG11/images/painting/marker.svg

Impostando il marcatore stroke="none" e fill="black" il rendering sembra bene:

https://codepen.io/anon/pen/qmYzGE

Nota: Ho testato questo solo in IE11. La mia ipotesi è che funzionerà almeno anche in IE10. Qualsiasi informazione su questo molto benvenuto.