fix: 应该使用svg特殊的matrix #91

karasjs · Sep 17, 2020 · 5533bd9 · 5533bd9
1 parent 63390ed
commit 5533bd9
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/index.js b/index.js
@@ -11459,7 +11459,7 @@
 
               if (_tagName === 'path') {
                 var matrix = sibling.__svgMatrix;
-                var inverse = mx.inverse(this.matrix);
+                var inverse = mx.inverse(this.__svgMatrix);
                 matrix = mx.multiply(matrix, inverse); // transform属性放在最后一个省去循环
 
                 var _len3 = _props.length;

diff --git a/index.js.map b/index.js.map
diff --git a/src/node/Xom.js b/src/node/Xom.js
@@ -1729,7 +1729,7 @@ class Xom extends Node {
           let { tagName, props } = children[i];
           if(tagName === 'path') {
             let matrix = sibling.__svgMatrix;
-            let inverse = mx.inverse(this.matrix);
+            let inverse = mx.inverse(this.__svgMatrix);
             matrix = mx.multiply(matrix, inverse);
             // transform属性放在最后一个省去循环
             let len = props.length;

diff --git a/test/animate-mask-svg/test.js b/test/animate-mask-svg/test.js
@@ -7,7 +7,7 @@ module.exports = {
       .url('file://' + path.join(__dirname, 'index.html'))
       .waitForElementVisible('body', 1000)
       .pause(500)
-      .assert.value('input', '{"bb":[],"children":[{"bb":[],"children":[{"type":"text","children":[{"type":"item","tagName":"text","props":[["x",0],["y",14.484375],["fill","rgba(0,0,0,1)"],["font-family","arial"],["font-weight",400],["font-style","normal"],["font-size","16px"]],"content":"looooooooooooooong"}]}],"opacity":1,"type":"dom"},{"bb":[{"type":"item","tagName":"rect","props":[["x",5],["y",10],["width",100],["height",100],["fill","rgba(255,0,0,1)"]]}],"children":[{"type":"text","children":[{"type":"item","tagName":"text","props":[["x",5],["y",24.484375],["fill","rgba(0,0,0,1)"],["font-family","arial"],["font-weight",400],["font-style","normal"],["font-size","16px"]],"content":"123"}]}],"opacity":1,"type":"dom","mask":"url(#karas-defs-0-0)"}],"opacity":1,"type":"dom","defs":[{"tagName":"mask","props":[],"children":[{"type":"item","tagName":"path","props":[["d","M50,0L150,100L50,100L50,0"],["fill","rgba(238,238,238,1)"],["stroke","rgba(0,0,0,1)"],["stroke-width",0]]}],"uuid":"karas-defs-0-0"}]}')
+      .assert.value('input', '{"bb":[],"children":[{"bb":[],"children":[{"type":"text","children":[{"type":"item","tagName":"text","props":[["x",0],["y",14.484375],["fill","rgba(0,0,0,1)"],["font-family","arial"],["font-weight",400],["font-style","normal"],["font-size","16px"]],"content":"looooooooooooooong"}]}],"opacity":1,"type":"dom"},{"bb":[{"type":"item","tagName":"rect","props":[["x",5],["y",10],["width",100],["height",100],["fill","rgba(255,0,0,1)"]]}],"children":[{"type":"text","children":[{"type":"item","tagName":"text","props":[["x",5],["y",24.484375],["fill","rgba(0,0,0,1)"],["font-family","arial"],["font-weight",400],["font-style","normal"],["font-size","16px"]],"content":"123"}]}],"opacity":1,"type":"dom","mask":"url(#karas-defs-0-0)"}],"opacity":1,"type":"dom","defs":[{"tagName":"mask","props":[],"children":[{"type":"item","tagName":"path","props":[["d","M50,0L150,100L50,100L50,0"],["fill","rgba(238,238,238,1)"],["stroke","rgba(0,0,0,1)"],["stroke-width",0],["transform","matrix(1,0,0,1,0,0)"]]}],"uuid":"karas-defs-0-0"}]}')
       .end();
   }
 };
diff --git a/test/clip-multi-svg/test.js b/test/clip-multi-svg/test.js
diff --git a/test/mask-target-transform-svg/test.js b/test/mask-target-transform-svg/test.js