svg标记在IE9-10中不起作用 [英] svg marker does not work in IE9-10

问题描述

第一次在svg上工作。
我有以下svg定义为'箭头般的'路径

 < defs> 
< marker id =startrefX =1refY =5markerUnits =userSpaceOnUsemarkerWidth =17markerHeight =11orient =auto> 
< path id =有条件的d =M 0 6 L 8 1 L 15 5 L 8 9 L 1 5fill =whitestroke =blackstroke-width =1/> ; 
< path id =defaultd =M 5 0 L 11 10fill =whitestroke =blackstroke-width =1/> 
< / marker> 
< marker id =endrefX =15refY =6markerUnits =userSpaceOnUsemarkerWidth =15markerHeight =12orient =auto> 
< path id =arrowheadd =M 0 1 L 15 6 L 0 11zfill =blackstroke =blackstroke-linejoin =roundstroke-width =2/ > 
< / marker> 
< / defs> 
< g id =edge> 
< path id =bg_framed =M10 50 L210 50stroke =blackfill =nonestroke-width =2stroke-linecap =roundstroke-linejoin =round marker-start =url（#start）marker-end =url（#end）/> 
< text id =text_namex =0y =0oryx：edgePosition =startTop/> 
< / g> 
  

但它不会在IE 9或IE 10的路径末尾显示箭头

IE中是否支持'triangle'或代码中有问题？

这里有一个例子，

有一个小问题显示问题：
http://jsfiddle.net/EEYZZ/

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

我的解决方法是从DOM中删除节点并再次添加，这将根据需要更新节点...不要谈论性能和内容，但我认为目前没有更好的方法来做到这一点。 （ http://jsfiddle.net/kaljak/5zTv9/3/ ）

Working first time on svg. I have following svg definition for an 'arrow-like' path

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

But it does not show arrow at the end of path in IE 9 or IE 10

Does 'triangle' not supported in IE or Problem in the code?

An example here, http://www.w3.org/TR/SVG11/images/painting/marker.svg too does not work in IE.

Help Please, it is the only point my workflow editor has stuck.

Link result

My code's result in FF is:

And code result in IE is(there is no arrow, no square at the end of arrow):

解决方案

The problem is already reported to Microsoft as xdhmoore wrote in his answer: https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

There is a fiddle where the problem is shown: http://jsfiddle.net/EEYZZ/

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

My workaround is to manuelly remove the node from DOM and add it again, this will update the node as wanted... Don't speak about performance and stuff, but I think currently there is no better way to do it. (http://jsfiddle.net/kaljak/5zTv9/3/)

这篇关于svg标记在IE9-10中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！