Years ago our company created a reporting system on IIS that serves up a blend of SVG and javascript. Some time ago, the application was ported to work on ie9 with its native implementation of SVG. When testing began with ie10, it
was found that all of the scroll boxes were scrolling just their initially displayed rows all the way across the entire canvas. Javascript was used to change the transform attribute to translate the clipPath down while the same thing is done to the content
pane but in the opposite direction, which to the end user appears as scrolling. On ie10 the pane would still move up, but the clipPath would not move down, so users could not use the application.
Why doesn't the transform update that has worked for the past 10 years work on ie10?
I was able to overcome this issue by replacing the existing clipPath with a new one that is created with the desired transform. I'm looking for a more elegant solution to this issue.
SVG:
<clipPath id="i1033" transform="translate(0 24)" pos="0" text-rendering="optimizeSpeed" shape-rendering="optimizeSpeed">
<rect x="266" y="228" width="384" height="168"/>
</clipPath>
<g id="i3762" clip-path="url(#i1033)" >
// svg that will scrolled in the scroll pane.
</g>
What had to change to overcome the issue in ie10:
if (isIE == 10) {
// Setting the transform attribute on a clipPath does not work in ie10, but creating a new clipPath does!
var newClipPath = document.createElementNS(svgNS, 'clipPath');
newClipPath.setAttribute("id", clipPath.id);
newClipPath.setAttribute("transform", "translate(0, " + newPosition + ")");
newClipPath.setAttribute("pos", "0");
newClipPath.setAttribute("text-rendering", "optimizeSpeed");
newClipPath.setAttribute("shape-rendering", "optimizeSpeed");
var elements = clipPath.getElementsByTagName('rect');
var rect = elements[0];
var newRect = document.createElementNS(svgNS, 'rect');
newRect.setAttribute("x", rect.x.baseVal.value);
newRect.setAttribute("y", rect.y.baseVal.value);
newRect.setAttribute("width", rect.width.baseVal.value);
newRect.setAttribute("height", rect.height.baseVal.value);
newClipPath.appendChild(newRect);
var parent = clipPath.parentNode;
parent.removeChild(clipPath);
parent.appendChild(newClipPath);
} else {
clipPath.setAttribute("transform", "translate(0, " + newPosition + ")");
}