Matrix transformations aren't interpreted correctly #449
Comments
|
Thanks for posting your question. There is a rendering bug here.., but that's minor compared to what you're currently experiencing. If you wrap your <svg>
<g>
<!-- ... Your SVG Code -->
</g>
</svg>
Edit February 18, 2020: This is actually working on the latest dev. Hope this helps |
|
That is my mistake, I forgot to include the svg tags when I copied everything. They were already wrapped in svg tags. Here is the source for it https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg |
|
Then which version are you using? Because it interprets fine for me. |
|
That's very odd because I can verify that I'm running v0.8.0-dev. |
|
Okay, I think I'm seeing the issue now. It's with how the horse's eye is rendered, right? Like so:
|
|
Oh that's very strange because here is what I get. And this is with no other scripts or css or elements except the one I append to and the svg.
|
|
If it helps at all these are the values from |
|
So I created this . It does a side by side comparison of what happens when the values for the matrix change. |
|
Thanks for the clarification and sorry about the the discrepancy in my screenshot. This was me fiddling with the transforms. I believe there is a place further upstream where the transforms get applied again which is causing the problem. I'll get to the bottom of this and report back. Thanks again for posting! |
|
Okay, I was able to identify the problem and find a solution. But, there is a trade off. You won't be able to use the If you'd like to use the patch, I've put it on a new branch here: https://github.com/jonobr1/two.js/tree/449 |
|
Thank you very much, I don't need those thansforms so this branch works for me. If I have any time I'll see if I can help out. I'm not too bad with matrices. You can close this issue or keep it open for tracking the branch. |
|
Sounds good, I'll leave it open to track the issue. If you have any reference material on how to pull out |
|
This here doesn't seem too bad. I think the matrix is multiplied. So for a it's |
|
Thanks for sharing that article. It's actually the one I used to construct the methods on One major problem is that rotation in Two.js is a simple radians value. There aren't any indications to account for skew yet 😞 |
|
If there isn't any support for skew yet I think you'd need to use some math to check if the matrix string is a rotation or a skew and then return an error if it involves a skew. Otherwise I think for every scale and rotation you would need to add a translation to go from absolute to relative.. or is relative to absolute, I'm not great with css stuff 😆 |
Hi @ErenForce , I also faced the same issue where the interpret is not taking the transformations. Thanks. |
|
@mejaz, thanks for posting. Two.js recently incremented its latest version (to v0.7.1), so first make sure you're using that version. Then you'll be able to set a Two.js specific property to have matrices copied exactly as the imported SVG. You'll be able to do that like so: var two = new Two();
Two.AutoCalculateImportedMatrices = false;
var firstSvgElem = two.interpret(svgElement);
// You will not be able to use the `translate`, `rotate`, or `scale`
// properties on this or child elements of that SVG. Because the
// transformation has been hard copied into the matrix
// You can modify the matrix yourself like so:
// firstSvgElem.matrix.translate(x, y);
// And you can switch back to the default interpretation by
// setting the boolean back to `true` before you interpret or load an SVG.
Two.AutoCalculateImportedMatrices = true;
var secondSvgElem = two.interpret(svgElement);
secondSvgElem.translation.x += 50; // This will be respected.Hope this clarifies things for you. |
|
Thanks @jonobr1 for your reply. I have corrected my I am using The interpreted SVG generated after I render has one path missing the stroke color and the transformation. (please see the below first path of both SVGs) Any ideas where I am going wrong? Source SVG:Interpreted SVG: |
|
This is what I get when I run the same thing. Is this what you get? (Two.js is the one in gray outline border).
|
|
Hi @jonobr1 , |
|
Sorry, I didn't catch that you were developing this in node.js environment. I'll give that a try. One thing that may help is to not use the I'll report back when I test the node.js environment version. |
|
Sorry for the delay on this. There are two problems. The first is on your end. rgb strings are only compatible with percentages starting in SVG spec 1.2. Two.js is based on / compatible with 1.0 and 1.1. So you need to convert The second is on Two.js's end. In node.js environments using Hope this helps! |
When I try to interpret an svg with
transformation="matrix(...it renders very strangely then how it should render. I've tried using the dev branch with no luck. It appears as though the math for rotating is off. The shape should be rotated by about 45 degrees but it's rotated by nearly 0. It's also offset by quite a bit. I've verified that chrome renders the shape correctly and it's when it's interpreted that things go wrong. This occurs in both svg and canvas mode.Here is the input
And here is the output svg after being interpreted
The text was updated successfully, but these errors were encountered: