vector-drawable-svg
vector-drawable-svg copied to clipboard
Transform not fully applied to the svg files created
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.