none
Urgent!! Serious Bug: SVG marker is not updating when changing the line’s x/y in IE10.

    Question

  • We developed a diagramming component using SVG and used markers for links[line] to direct the connection b/w nodes. The marker is working fine when updating the line’s X and Y position in IE9 but it is now not working with IE.

    We are frustrated with the IE10 browser and are using updated IE10 version 10.0.9200.16384.

    Here is the simple code which reproduces the issue.

         <body>
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50%">
           <defs>
                  <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                         <path d="M 0 0 L 20 10 L 0 20 z"/>
                  </marker>
                  <marker id="Circle" viewBox="0 0 10 10" refX="4" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                         <circle cx="5" cy="5"  r="3" fill="black"/>
                  </marker>
                  <marker id="Rect" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
                         <rect width="10" height="10" fill="grey"/>
                  </marker>
           </defs>
           <line id="line1" x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" marker-end="url(#Triangle)" marker-start="url(#Circle)"/> 
        </svg>
             <table>
                 <tr>
                     <td>
                         line x1
                     </td>
                     <td>
                         <input type="text" id="txtlinex" style="width:50px" value="10" />
                     </td>
                 </tr>
                 <tr>
                     <td>
                         line y1
                     </td>
                     <td>
                         <input type="text" id="txtliney" style="width:50px" value="10" />
                     </td>
                 </tr>
             </table>
        <input type="button" id="button1" value="Move line offset " />
            <script type="text/javascript">
             $("#button1").click(function () {
                 $("#line1")[0].x1.baseVal.value = $("#txtlinex")[0].value;
                 $("#line1")[0].y1.baseVal.value = $("#txtliney")[0].value;
             });
        </script> 
         </body>
    

    Please looking into this issue and fix this asap.

    Please get back to me if any queries. 

    Regards,

    Senthilkumar.M

    Wednesday, December 12, 2012 4:15 AM

All replies

  • I have tested the code on http://jsfiddle.net/swYRK in Browser Mode 10 and the x/y values do update the shape as expected.

    IE Version is identical to yours.

    Do you have other strange SVG behaviors?


    • Edited by namar777 Wednesday, December 12, 2012 7:26 AM Updating answer
    Wednesday, December 12, 2012 7:25 AM
  • Thanks for the update, Namar.

    No, it is not working (i.e marker is not updated but line is updated) in IE10 + Windows 8 machine. The code in the link http://jsfiddle.net/swYRK is also not working in IE10.

    Browser the sample or your link in IE10 browser.

    Try the below combination. All are not working.

    Browser Mode: IE10,
    Document Mode: Standards, Quirks, Internet Explorer 9 Standards..etc, [for all document mode]

    I have created the video and uploaded in the below link.

    http://www.freefilehosting.net/video1_5

    Regards,

    Senthilkumar.M

    Wednesday, December 12, 2012 11:35 AM
  • Here are some steps for sanity check:

    1. Restart.
    2. Make sure no safe mode is on.
    3. Under Internet Options > Advanced > Accelerated Graphics > (switch both options)
    4. Test this on another machine if you haven't.
    5. Remove and then re-add IE10 feature in control panel.

    Here's a simpler example, see if it works http://jsfiddle.net/Gr6LC/

    Wednesday, December 12, 2012 2:38 PM
  • f12>Scripting tab, click "Start Debugging".... refresh your page..... error and warning messages about content being blocked by tracking protection will now be displayed in the scripting console.

    Rob^_^

    Thursday, December 13, 2012 2:24 AM
  • Thanks for the update.

    I am talking about SVG marker not line. The SVG marker which is attached with the line is not moving when updating the line.

    It is clearly shown in the attached image.

    http://www.freefilehosting.net/ie

    Note : Your code doesn’t have any svg marker.

    Thanks,

    Senthilkumar.M

    Friday, December 14, 2012 12:02 PM
  • Hello,

    I'm having the same problem!

    Is it already fixed?

    Thanks,

    Andreas M

    Wednesday, March 27, 2013 2:58 PM
  • see the status on the connect ticket.

    Regards.


    Rob^_^

    Wednesday, March 27, 2013 11:45 PM
  • Hello,

    I'm having the same problem!

    Is it already fixed?

    Thanks,

    Andreas M

    The short answer is "no".

    These three connect tickets have reported this issue: https://connect.microsoft.com/IE/feedback/details/781964/ , https://connect.microsoft.com/IE/feedback/details/773955/ , https://connect.microsoft.com/IE/feedback/details/773642/

    Thursday, May 09, 2013 4:14 PM
  • Had the same problem with the distanceStart and distanceEnd marker. Worked around the problem by drawing the markers: http://www.akoestikon.com/svg/show/TekeningMXT.svg?dikte_basis=80&dikte_foamkern=144&dikte_vulling=150&tweede_plaat=true&hoh=600&maten=true
    Wednesday, July 17, 2013 8:54 AM