Bug 51795 – @transform not updated after changes are made to SVGTransformList

• Component: SVG
• Status: RESOLVED INVALID

[Andrew VanderVeen]

This code doesn't seem to work in WebKit.
someSVGElement.setAttribute("transform", "matrix(a,b,c,d,e,f)"); // a-f being matrix values

See http://code.google.com/p/svg-edit/wiki/BrowserBugs#@transform_value_is_unreliable
The shim they mention is here: http://www.google.com/codesearch/p?hl=en#daBrs4Do4Ko/trunk/editor/svgtransformlist.js

[Andrew VanderVeen]

This might be related to this bug:
https://bugs.webkit.org/show_bug.cgi?id=31119

[Dirk Schulze]

Do you have a test case? According to the links you mentioned it should be fixed.

[Andrew VanderVeen]

Hmm, my example seems to use SVGAnimatedTransformList.

The code where I originally ran into the problem yesterday is here: https://github.com/avanderveen/jSVG

just download that and fire up i.html, try scrolling in the svg and nothing happens. There will be SVGAnimatedTransformLists logged to the console each time you scroll, but the 'g' element's transform property does not update.

Here's the code (lines 26-30 in jsvg.js) where it fails:
...
transMatrix = svgG.getCTM().multiply(transMatrix);
var mtxStr = "matrix(" + transMatrix.a + "," + transMatrix.b + "," + transMatrix.c + "," + transMatrix.d + "," + transMatrix.e + "," + transMatrix.f + ")";
svgG.setAttribute("transform",  mtxStr); // doesn't work in WebKit
console.log($(svgG).attr("transform"));
...

You'll see the SVGAnimatedTransformList logged in the console, but the update isn't reflected.

I'm running Chromium 8.0.552.224 .. not sure which v. of WebKit that is, but it's up-to-date.

I hope it's not just me doing something wrong here... if it is, my bad for reporting it as a bug.

[Dirk Schulze]

You may misinterpret the results:

<svg xmlns="http://www.w3.org/2000/svg" onload="run()">
<rect width="100" height="100" fill="red"/>
<rect id="transform" width="50" height="50" fill="green"/>
<script type="text/ecmascript"><![CDATA[

function run() {
    // Scale the second rect by factor 2
    var rect = document.getElementById("transform");
    rect.setAttribute("transform", "matrix(2,0,0,2,0,0)");

    // Check if setAttribute influences SVGAnimatedTransformList
    var matrix = rect.transform.baseVal.getItem(0).matrix;
    console.log("matrix("+matrix.a+","+matrix.b+","+matrix.c+","+
                          matrix.d+","+matrix.e+","+matrix.f+")");
}

]]></script>
</svg>

If it would not work, you'd see some red on the SVG and the output on the console wouldn't be 'matrix(2,0,0,2,0,0)'. But it works on all versions of webkit.

[Dirk Schulze]

Created attachment 94343 [details]
SVGRectElement with setAttribute("transform", matrix)

Attache example of previous comment to the bug.

[Dirk Schulze]

I added
      var g = document.getElementsByTagName("g")[0];

in your 'reframe' function and took g instead of svgG and this affects the visual output. I guess you made a wrong assumption.
Nevertheless you seem to have more failures in your script. Right after scrolling all values turned to NaN. You should make sure that something like that never occurs before passing it to DOM.