SVG line markers not updating when line moves in IE10?
This is a quick way of doing it, that works well.
I have not noticed any flickering or performance related issues.
Simply re-add the svg node in it's original place:
if (navigator.appVersion.indexOf("MSIE 10") != -1) {
svgNode.parentNode.insertBefore(svgNode, svgNode);
}
Of course, you could use any browser sniffing of choice..
internet explorer 10 not showing svg path (d3.js graph)
Summary:
There is a bug in IE that causes paths with markers to render improperly. The original code with markers removed renders without problem.
There are three solutions:
- Don't use markers
- Embed the markers in the path like this: http://jsfiddle.net/niaconis/3YsWY/9/
- Wait for Microsoft to fix this bug
Option 2, though a little ugly, is probably the most viable.
Original post:
Unfortunately, I've found James' answer only works for the static svg.
I pulled the css and javascript from the original example and placed them in jsfiddle. The links displayed correctly in Chrome 26 (this was my sort of control test), but didn't display at all in IE 10 (as expected). I then edited the javascript which dealt with the creation of the links according to the answer James gave:
var path = svg.append("svg:g")
.attr("fill", function(d) { return "none"; }) /*new*/
.attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
.attr("stroke", function(d) { return "#666"; }) /*new*/
.selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
This did add the specified attributes to the <g> element, but had no effect on the display of the "live" graph. (Checking back now, I've noticed the "static" graph displays links in IE10 even without these attributes as seen here.)
I was able to make the links visible in IE10 (even directly in the original example) by using IE's developer toolbar. I found one of the <path> tags in the DOM, then in the Style tab to the right unchecked and rechecked the "path.link" style.
This gets the links to show, but any subsequent interaction with the graph disconnects the markers from the ends of the links. They simply stay in place, and I've found nothing that will get them to re-attach.
The only source of information I can find that seems relevant is this SO post: Element doesn't appear in IE7 until I edit it through Developer Toolbar
However, I'm fairly new to svg, so I haven't the slightest idea how to port the fix described there to svg (that fix was for an html element)
Maybe this will help someone get headed in the right direction?
P.S. I know this isn't exactly an answer, and I would have just posted this as a reply to James' answer, but it seems I don't have enough reputation to do that. =\
Update:
As it turns out, this issue is related entirely to markers. This fiddle is the original code but with markers removed, and the links show up just fine. The marker issue has been documented before and is a serious bug of IE10. Why it also causes the links to disappear, I don't know.
This fiddle offers a work-around. It's not the cleanest solution as I've encoded each marker directly in its link's path, but it works.
If anyone can find a work-around for the marker issue itself, that would be better, and it should additionally be posted as an answer to the other marker question.
(Also note: My solution makes dashed links look terrible, so I've made them light blue instead.)
This bug has been reported to Microsoft, but so far they seem to have denied or ignored it. Please go to this post on Microsoft's issue tracker website and click the link indicating you can reproduce this bug. Maybe we can get their attention?
IE10 does not scale background SVG correctly when zoomed (on Surface/Windows 8 phone)
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
svg transform moves image offscreen when going up
You're going off the top of the SVG canvas. If you start lower you'll have more room to go up.
I've wrapped the drawing in an extra <g> tag that translates stuff down as Snap doesn't seem to have additive animation support.
var rearCab = Snap('#RearCab'); var rCab = rearCab.select('#RCab');
document.getElementById("up").addEventListener("click",function(){ rCab.animate({ transform: 't0,-350' }, 1000); }) document.getElementById("down").addEventListener("click",function(){ rCab.animate({ transform: 't0,350' }, 1000); })div.rearCab{ top: 30%; left: 30%; position: absolute; width: 250px; height: 250px;}
.st0 { clip-path: url(#SVGID_2_); fill: url(#SVGID_3_);}
.st1 { fill: #1C1C1C;}
.st2 { clip-path: url(#SVGID_5_); fill: url(#SVGID_6_);}
.st3 { fill: url(#SVGID_7_);}
.st4 { fill: url(#SVGID_8_);}
.st5 { fill: url(#SVGID_9_);}
.st6 { fill: url(#SVGID_10_);}
.st7 { fill: url(#SVGID_11_);}
.st8 { fill: url(#SVGID_12_);}
.st9 { fill: url(#SVGID_13_);}
.st10 { display: none;}
.st11 { display: inline;}
.st12 { clip-path: url(#SVGID_15_); fill: url(#SVGID_16_);}
.st13 { display: inline; fill: #1C1C1C;}
.st14 { clip-path: url(#SVGID_18_); fill: url(#SVGID_19_);}
.st15 { fill: url(#SVGID_20_);}
.st16 { fill: url(#SVGID_21_);}
.st17 { fill: url(#SVGID_22_);}
.st18 { fill: url(#SVGID_23_);}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script><div class="rearCab"> <svg version="1.1" id="RearCab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900.7 901.9" style="enable-background:new 0 0 100.7 151.9;" xml:space="preserve">
<g transform="translate(0, 350)"> <g id="RCab"> <g id="RightDoorRear_1_"> <g id="RightDoorRear"> <g> <g> <g> <g> <g> <g> <g> <defs> <rect id="SVGID_1_" x="50.1" y="25.6" width="28.4" height="116.5" /> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;" /> </clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1799.5736" y1="-924.9411" x2="-1741.5736" y2="-924.9411" gradientTransform="matrix(-1 0 0 1 -1721.0736 1008.1411)"> <stop offset="2.688172e-02" style="stop-color:#5A5B5D" /> <stop offset="0.2742" style="stop-color:#CACCCE" /> <stop offset="0.439" style="stop-color:#C8CACC" /> <stop offset="0.5121" style="stop-color:#C1C3C5" /> <stop offset="0.5215" style="stop-color:#C0C1C3" /> <stop offset="0.6609" style="stop-color:#C2C3C5" /> <stop offset="0.7111" style="stop-color:#C8CACC" /> <stop offset="0.7204" style="stop-color:#CACCCE" /> <stop offset="0.7608" style="stop-color:#C1C2C4" /> <stop offset="0.8282" style="stop-color:#A7A9AB" /> <stop offset="0.9138" style="stop-color:#7E7F81" /> <stop offset="0.9785" style="stop-color:#5A5B5D" /> </linearGradient> <polygon class="st0" points="20.5,24.3 78.5,24.3 78.5,142.1 20.5,142.1 " /> </g> </g> </g> </g> </g> </g> </g> </g> <rect x="49.8" y="25.6" class="st1" width="0.3" height="116.5" /> </g> <g id="LeftDoorRear"> <g id="LeftDoor"> <g> <g> <g> <g> <g> <g> <g> <defs> <rect id="SVGID_4_" x="21.5" y="25.6" width="28.8" height="116.5" /> </defs> <clipPath id="SVGID_5_"> <use xlink:href="#SVGID_4_" style="overflow:visible;" /> </clipPath>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="21.5" y1="106.7" x2="80.4" y2="106.7" gradientTransform="matrix(1 0 0 -1 0 191.2)"> <stop offset="2.688172e-02" style="stop-color:#5A5B5D" /> <stop offset="0.2742" style="stop-color:#CACCCE" /> <stop offset="0.439" style="stop-color:#C8CACC" /> <stop offset="0.5121" style="stop-color:#C1C3C5" /> <stop offset="0.5215" style="stop-color:#C0C1C3" /> <stop offset="0.6609" style="stop-color:#C2C3C5" /> <stop offset="0.7111" style="stop-color:#C8CACC" /> <stop offset="0.7204" style="stop-color:#CACCCE" /> <stop offset="0.7608" style="stop-color:#C1C2C4" /> <stop offset="0.8282" style="stop-color:#A7A9AB" /> <stop offset="0.9138" style="stop-color:#7E7F81" /> <stop offset="0.9785" style="stop-color:#5A5B5D" /> </linearGradient> <rect x="21.5" y="25.6" class="st2" width="58.9" height="117.8" /> </g> </g> </g> </g> </g> </g> </g> </g> <rect x="49.8" y="25.6" class="st1" width="0.3" height="116.5" /> </g> <g id="CeilingandFloor">
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-5430.1064" y1="244.7255" x2="-5430.1064" y2="178.3705" gradientTransform="matrix(-0.8862 0 0 -1 -4729.9604 231.2)"> <stop offset="0" style="stop-color:#E5E2DF" /> <stop offset="0" style="stop-color:#D9D4D0" /> <stop offset="0" style="stop-color:#CCC6C1" /> <stop offset="6.668396e-02" style="stop-color:#BDB8B4" /> <stop offset="0.1461" style="stop-color:#A6A29F" /> <stop offset="0.8764" style="stop-color:#A6A29F" /> <stop offset="1" style="stop-color:#D0D2D3" /> <stop offset="1" style="stop-color:#A6A8AB" /> </linearGradient> <polygon class="st3" points="85.9,14.7 78.5,25.2 78.5,151.9 85.9,151.9 " />
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="18.15" y1="245.4305" x2="18.15" y2="178.7922" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0" style="stop-color:#E5E2DF" /> <stop offset="0" style="stop-color:#D9D4D0" /> <stop offset="0" style="stop-color:#CCC6C1" /> <stop offset="6.668396e-02" style="stop-color:#BDB8B4" /> <stop offset="0.1461" style="stop-color:#A6A29F" /> <stop offset="0.8764" style="stop-color:#A6A29F" /> <stop offset="1" style="stop-color:#D0D2D3" /> <stop offset="1" style="stop-color:#A6A8AB" /> </linearGradient> <polygon class="st4" points="14.8,14.1 21.5,24.7 21.5,151.9 14.8,151.9 " />
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-4755.9702" y1="-2614.2454" x2="-4755.9702" y2="-2628.8735" gradientTransform="matrix(-1 0 0 1 -4705.5703 2768.1921)"> <stop offset="0.2903" style="stop-color:#555658" /> <stop offset="1" style="stop-color:#231F20" /> </linearGradient> <polyline class="st5" points="14.9,151.9 21.5,142.1 78.5,142.1 85.9,151.9 14.9,151.9 " />
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-4094.2314" y1="1633.9298" x2="-4094.2314" y2="1571.3958" gradientTransform="matrix(0 1 1 0 -1547.031 4095.8813)"> <stop offset="0.1828" style="stop-color:#96999B" /> <stop offset="0.5608" style="stop-color:#A1A3A6" /> <stop offset="0.957" style="stop-color:#A6A8AB" /> </linearGradient> <polygon class="st6" points="3.5,3.3 3.5,0 97.5,0 97.5,3.3 " />
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="50.4" y1="219.3384" x2="50.4" y2="213.8274" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0.457" style="stop-color:#48484A" /> <stop offset="0.8495" style="stop-color:#898B8D" /> <stop offset="0.9677" style="stop-color:#48484A" /> </linearGradient> <polygon class="st7" points="21.5,25.6 14.9,19.9 14.9,14.2 85.9,14.2 85.9,19.3 78.5,25.6 " />
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="50.5" y1="232.7484" x2="50.5" y2="214.6539" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="1.612903e-02" style="stop-color:#E6E7E8" /> <stop offset="0.4194" style="stop-color:#B9BBBD" /> <stop offset="1" style="stop-color:#4A4A4C" /> </linearGradient> <polygon class="st8" points="3.5,3.3 14.9,14.7 86.1,14.7 97.5,3.4 " /> <g>
<image style="overflow:visible;opacity:0.75;enable-background:new ;" width="42" height="35" transform="matrix(1 0 0 1 29 3.9)"> </image> <g>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="44.0384" y1="210.2" x2="55.9487" y2="210.2" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0" style="stop-color:#E5E2DF" /> <stop offset="0" style="stop-color:#D9D4D0" /> <stop offset="0" style="stop-color:#CCC6C1" /> <stop offset="6.668396e-02" style="stop-color:#BDB8B4" /> <stop offset="0.1461" style="stop-color:#A6A29F" /> <stop offset="0.5" style="stop-color:#FFFFFF" /> <stop offset="0.5796" style="stop-color:#F1F1F0" /> <stop offset="0.7315" style="stop-color:#CDCBC9" /> <stop offset="0.8764" style="stop-color:#A6A29F" /> <stop offset="1" style="stop-color:#D0D2D3" /> <stop offset="1" style="stop-color:#A6A8AB" /> </linearGradient> <ellipse class="st9" cx="50" cy="21" rx="6" ry="2" /> </g> </g> </g> <g id="LeftDoor_2_" class="st10"> <g id="RightDoor_2_" class="st11"> <g> <g> <g> <g> <g> <g> <g> <defs> <rect id="SVGID_14_" x="14.8" y="14.7" width="35.5" height="137.2" /> </defs> <clipPath id="SVGID_15_"> <use xlink:href="#SVGID_14_" style="overflow:visible;" /> </clipPath>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-1020.2736" y1="-925.5911" x2="-947.7736" y2="-925.5911" gradientTransform="matrix(1 0 0 1 1035.0736 1008.1411)"> <stop offset="2.688172e-02" style="stop-color:#5A5B5D" /> <stop offset="0.2742" style="stop-color:#CACCCE" /> <stop offset="0.439" style="stop-color:#C8CACC" /> <stop offset="0.5121" style="stop-color:#C1C3C5" /> <stop offset="0.5215" style="stop-color:#C0C1C3" /> <stop offset="0.6609" style="stop-color:#C2C3C5" /> <stop offset="0.7111" style="stop-color:#C8CACC" /> <stop offset="0.7204" style="stop-color:#CACCCE" /> <stop offset="0.7608" style="stop-color:#C1C2C4" /> <stop offset="0.8282" style="stop-color:#A7A9AB" /> <stop offset="0.9138" style="stop-color:#7E7F81" /> <stop offset="0.9785" style="stop-color:#5A5B5D" /> </linearGradient> <polygon class="st12" points="87.3,151.9 14.8,151.9 14.8,13.2 87.3,13.2 " /> </g> </g> </g> </g> </g> </g> </g> </g> <rect x="50.2" y="14.7" class="st13" width="0.3" height="137.2" /> </g> <g id="RightDoor" class="st10"> <g id="RightDoor_1_" class="st11"> <g> <g> <g> <g> <g> <g> <g> <defs> <rect id="SVGID_17_" x="50.3" y="14.7" width="35.6" height="137.2" /> </defs> <clipPath id="SVGID_18_"> <use xlink:href="#SVGID_17_" style="overflow:visible;" /> </clipPath>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-1806.9736" y1="-925.5911" x2="-1734.4736" y2="-925.5911" gradientTransform="matrix(-1 0 0 1 -1721.0736 1008.1411)"> <stop offset="2.688172e-02" style="stop-color:#5A5B5D" /> <stop offset="0.2742" style="stop-color:#CACCCE" /> <stop offset="0.439" style="stop-color:#C8CACC" /> <stop offset="0.5121" style="stop-color:#C1C3C5" /> <stop offset="0.5215" style="stop-color:#C0C1C3" /> <stop offset="0.6609" style="stop-color:#C2C3C5" /> <stop offset="0.7111" style="stop-color:#C8CACC" /> <stop offset="0.7204" style="stop-color:#CACCCE" /> <stop offset="0.7608" style="stop-color:#C1C2C4" /> <stop offset="0.8282" style="stop-color:#A7A9AB" /> <stop offset="0.9138" style="stop-color:#7E7F81" /> <stop offset="0.9785" style="stop-color:#5A5B5D" /> </linearGradient> <polygon class="st14" points="13.4,13.2 85.9,13.2 85.9,151.9 13.4,151.9 " /> </g> </g> </g> </g> </g> </g> </g> </g> <rect x="50.2" y="14.7" class="st13" width="0.3" height="137.2" /> </g> <g id="LeftBar">
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="9.2" y1="258.4245" x2="9.2" y2="186.5748" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0.7527" style="stop-color:#616264" /> <stop offset="1" style="stop-color:#898B8D" /> </linearGradient> <polygon class="st15" points="3.5,3.3 14.9,14.7 14.9,151.9 3.5,151.9 " />
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="1.9" y1="214.1236" x2="1.9" y2="112.9763" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0.1828" style="stop-color:#87898B" /> <stop offset="0.5404" style="stop-color:#7D7F81" /> <stop offset="0.957" style="stop-color:#797B7D" /> </linearGradient> <rect x="0.2" class="st16" width="3.4" height="151.9" /> </g> <g id="RightBar">
<linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="-5440.8267" y1="258.4242" x2="-5440.8267" y2="186.5752" gradientTransform="matrix(-0.8862 0 0 -1 -4729.9604 231.2)"> <stop offset="0.7527" style="stop-color:#616264" /> <stop offset="1" style="stop-color:#898B8D" /> </linearGradient> <polygon class="st17" points="97.5,3.3 85.9,14.7 85.9,151.9 97.5,151.9 " />
<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="99.2" y1="214.1236" x2="99.2" y2="112.9763" gradientTransform="matrix(1 0 0 -1 0 231.2)"> <stop offset="0.2043" style="stop-color:#77787B" /> <stop offset="0.5796" style="stop-color:#6B6C6F" /> <stop offset="0.957" style="stop-color:#67686B" /> </linearGradient> <rect x="97.5" class="st18" width="3.4" height="151.9" /> </g> </g> </g> </svg></div>
<button id="up">Up</button><button id="down">Down</button>
</button>Oryx Editor SVG marker end (sequence arrow) does not work in IE 10 and 11 in oryx editor (JBPM)
I got it working finally I referred few of link in comments section and change the code in oryx editor svgmarker.js file inside the update function that is defined at line number 173.
File path : oryx /editor/client/scripts/Core/SVG/svgmarker.js
Code added inside the update function:
var cusMarkerID = document.getElementById(this.element.id);
//update old values to prepare the next update
this.oldRefX = this.refX;
this.oldRefY = this.refY;
this.oldMarkerWidth = this.markerWidth;
this.oldMarkerHeight = this.markerHeight;
this.element.parent = cusMarkerID.parentNode;
this.element.parent.removeChild(cusMarkerID);
this.element.appendChild(cusMarkerID);
It was suggested in microsoft help docs for IE.
Related Topics
How to Restrict My Input Type="File" to Accept Only Png Image Files Not Working in Firefox
CSS Metaphysics: Why Is Page Vertical Alignment So Difficult
Chrome Bug with Colspan and Border
Inject <Input> in Innerhtml Angular 2
How to Put Table in The Center of The Page Using CSS
CSS Height Working But Min-Height Doesn't Work
Delete HTML Tags in Sed or Similar
How to Change Style of Radio and Checkbox Input
What Is Difference Between <Pre> and <Code> HTML Tag
How to Import Local Image Using Knitr for Markdown
How to See Which Srcset Image a Browser Is Using with Browser Developer Tools