Transform not fully applied to the svg files created

[avencat]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I had a problem with the transformations on my VectorDrawable, only the last element was taken into consideration so I fixed it and also I modified translation to translate and rotation to rotate so the SVGs are good to go now with their transform! 🙂

Here is the diff that solved my problem:

diff --git a/node_modules/vector-drawable-svg/src/vector-drawable-svg.js b/node_modules/vector-drawable-svg/src/vector-drawable-svg.js
index f4f0599..dd56c57 100644
--- a/node_modules/vector-drawable-svg/src/vector-drawable-svg.js
+++ b/node_modules/vector-drawable-svg/src/vector-drawable-svg.js
@@ -22,7 +22,7 @@ const attributeTransforms = {
 const groupAttrsMap = {
 	'android:name': 'id',
 	'android:pivotX': { transform: 'pivotX' },
-	'android:pivotY': { transform: 'pivotX' },
+	'android:pivotY': { transform: 'pivotY' },
 	'android:rotation': { transform: 'rotation' },
 	'android:scaleX': { transform: 'scaleX' },
 	'android:scaleY': { transform: 'scaleY' },
@@ -191,7 +191,7 @@ function transformNode(node, parent, root, defs) {
 		Array.from(node.attributes).forEach(attr => {
 			const svgAttr = groupAttrsMap[attr.name];
 			if (svgAttr.transform) {
-				const prevTransform = attrs['transform'] || {};
+				const prevTransform = attrs.get('transform') || {};
 				prevTransform[svgAttr.transform] = attr.value;
 				attrs.set('transform', prevTransform);
 
@@ -203,35 +203,34 @@ function transformNode(node, parent, root, defs) {
 		if (attrs.size > 0) {
 			const transforms = attrs.get('transform');
 			if (transforms) {
-				const scaleX = transforms.scaleX || 0;
-				const scaleY = transforms.scaleY || 0;
-				const hasScale = scaleX !== 0 || scaleY !== 0
+				const scaleX = transforms.scaleX || 1;
+				const scaleY = transforms.scaleY || 1;
+				const hasScale = scaleX !== 1 || scaleY !== 1
 
 
 				const pivotX = transforms.pivotX || 0;
 				const pivotY = transforms.pivotY || 0;
 				const hasPivot = pivotX !== 0 || pivotY !== 0
 
-
 				const translateX = transforms.translateX || 0;
 				const translateY = transforms.translateY || 0;
 				const hasTranslation = translateX !== 0 || translateY !== 0
 
-				const rotation = transforms.pivotY || 0;
+				const rotation = transforms.rotation || 0;
 				const hasRotation = rotation !== 0;
 
 				const t = [];
 
-				if (hasScale) {
-					t.push(`scale(${scaleX}, ${scaleY})`);
+				if (hasTranslation) {
+					t.push(`translate(${translateX}, ${translateY})`);
 				}
 
 				if (hasRotation) {
-					t.push(`rotation(${rotation})`);
+					t.push(`rotate(${rotation})`);
 				}
 
-				if (hasTranslation) {
-					t.push(`translation(${translateX}, ${translateY})`);
+				if (hasScale) {
+					t.push(`scale(${scaleX}, ${scaleY})`);
 				}
 
 				if (hasPivot) {

This issue body was partially generated by patch-package.

[seanghay]

Can you open a pull request?

[cristan]

I've taken your diff and used that verbatim to create the pull request.

I don't think that changing const prevTransform = attrs['transform'] || {}; into const prevTransform = attrs.get('transform') || {}; is better, so maybe revert that. Other than that it looks like a nice improvement :)

[cristan]

An example to test the problem I've ran into:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <path
        android:fillColor="#FFFF00"
        android:pathData="M0,0H100V100H0Z" />

    <group
        android:translateX="25"
        android:translateY="25">
        <path
            android:fillColor="#FF0000"
            android:pathData="M0,0H50V50H0Z" />
    </group>

</vector>

This is a red square in the middle, and currently is converted incorrectly by this library (and by extension at https://vd.floo.app/ )

[cristan]

The example image I've posted works now at https://vd.floo.app/ and the suggested code is now in the repo. Close this issue?

[seanghay]

Sure thanks @cristan!