svg marker không hoạt động trong IE9-10

Question

Làm việc lần đầu tiên trên svg. Tôi đã theo định nghĩa svg cho một con đường 'mũi tên giống như'

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

Nhưng nó không hiển thị mũi tên ở cuối con đường trong IE 9 hoặc IE 10

Liệu 'tam giác' không được hỗ trợ trong IE hoặc Sự cố trong mã?

Ví dụ ở đây, http://www.w3.org/TR/SVG11/images/painting/marker.svg cũng không hoạt động trong IE.

Trợ giúp Xin vui lòng, đây là điểm duy nhất mà trình soạn thảo quy trình làm việc của tôi bị kẹt.

kết quả liên kết

kết quả Mã của tôi trong FF là:

Và mã kết quả trong IE được (không có mũi tên, không vuông ở phần cuối của mũi tên):

Answer 1

Điều này xuất hiện để hiển thị tốt trong IE10 cho tôi (hình dạng kim cương bên trái và hình tam giác ở bên phải).

Tuy nhiên, có là một số sự cố đã biết với các điểm đánh dấu trong IE. Ví dụ, IE không hỗ trợ markerUnits = "strokeWidth".

Answer 2

Tôi đã gặp sự cố khi di chuyển đường với dấu. Chúng hiển thị tốt trên tải trang, nhưng không di chuyển khi các thuộc tính x/y dòng được thay đổi.

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

Vấn đề đã được báo cáo cho Microsoft như xdhmoore đã viết trong câu trả lời của mình: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

Có một fiddle nơi mà vấn đề được trình bày: http://jsfiddle.net/EEYZZ/

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

Cách giải quyết của tôi là loại bỏ một cách manuelly nút từ DOM và thêm nó một lần nữa, điều này sẽ cập nhật nút như mong muốn ... Đừng nói về hiệu suất và công cụ, nhưng tôi nghĩ hiện tại không có cách nào tốt hơn để làm điều đó. (http://jsfiddle.net/kaljak/5zTv9/3/)

Answer 4

Tôi đang đối mặt với cùng một vấn đề và nó đã khiến tôi khá đau đầu - tôi thực sự không thể hiểu tại sao Microsoft không sửa lỗi đó. Tôi đã quyết định thay thế các điểm đánh dấu bằng các đường dẫn tùy chỉnh có hiệu ứng phụ tốt đẹp mà bạn có thể, ví dụ: thay đổi màu tô hoặc màu khi chạy bằng JavaScript.

Tôi tạo svg bằng cách sử dụng d3, cạnh có lớp 'cạnh-đường dẫn' và đầu có lớp 'cạnh-tip'. Cả hai đường dẫn là con của svg: g. Các cạnh chính nó là một spline, do đó, để quay đầu tôi có độ dốc của 10 pixel cuối cùng.Đây là khá nhiều mã được sử dụng để cập nhật các mũi tên, làm việc tại 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)'; 
    }); 

Có lẽ nó sẽ giúp người :)

Answer 5

Đặt một nhóm khác xung quanh nguyên tố này và xác định trong nhóm này đánh dấu hoạt động trong MS Edge và các công cụ khác.

 <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

Tôi không thể đánh dấu để làm việc trong IE11, nhưng trong Edge chúng hoạt động. Bí quyết dành cho SVG nội tuyến bạn cần sử dụng xml:id cho các điểm đánh dấu thay vì chỉ id.

Chỉnh sửa: trên thực tế, anything:id hoạt động. Không chắc chắn lý do tại sao.

Chỉnh sửa 2: Ugh. Điều đó phá vỡ SVG trong Chrome. Bạn có thể sao chép ID: id="foo" edge_sucks:id="foo".

Chỉnh sửa 3: Đầu hmm có vẻ như hoạt động ở Edge sau khi tất cả. Không biết chuyện gì đang diễn ra.

Answer 7

Một vấn đề trong IE có vẻ là kế thừa các thuộc tính stroke, stroke-width và fill (trái với tiêu chuẩn).

Tuy nhiên, điều này có thể được giải quyết bằng cách đặt thuộc tính đột quỵ một cách rõ ràng.

Hãy xem xét các vấn đề với

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

Bằng cách đặt các điểm đánh dấu stroke="none" và fill="black" rendering có vẻ tốt đẹp:

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

Lưu ý: Tôi đã thử nghiệm này chỉ trong IE11. Tôi đoán là nó sẽ hoạt động ít nhất trong IE10. Mọi thông tin về điều này rất được hoan nghênh.