Skip to content

Commit

Permalink
chore: opacity supports
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanghay
seanghay committed Mar 13, 2023
1 parent b1cb8a5 commit 23e0e69
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 68 deletions.
136 changes: 69 additions & 67 deletions src/vector-drawable-svg.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
const { DOMParser, XMLSerializer } = require("@xmldom/xmldom");

const attributesMap = {
"android:pathData": "d",
"android:fillColor": "fill",
"android:strokeLineJoin": "stroke-linejoin",
"android:strokeLineCap": "stroke-linecap",
"android:strokeMiterLimit": "stroke-miterlimit",
"android:strokeWidth": "stroke-width",
"android:strokeColor": "stroke",
"android:fillType": "fill-rule",
"android:pathData": "d",
"android:fillColor": "fill",
"android:strokeLineJoin": "stroke-linejoin",
"android:strokeLineCap": "stroke-linecap",
"android:strokeMiterLimit": "stroke-miterlimit",
"android:strokeWidth": "stroke-width",
"android:strokeColor": "stroke",
"android:fillType": "fill-rule",
"android:fillAlpha": "fill-opacity",
"android:strokeAlpha": "stroke-opacity"
};

const attributeTransforms = {
Expand All @@ -31,12 +33,12 @@ function parsePath(root, pathNode) {
svgPath.setAttribute("fill", "none");

Array.from(pathNode.attributes).forEach((attr) => {
const svgAttrName = attributesMap[attr.name];
const transformer = attributeTransforms[attr.name];
if (svgAttrName) {
const svgAttrValue = transformer ? transformer(attr.value) : attr.value;
svgPath.setAttribute(svgAttrName, svgAttrValue);
}
const svgAttrName = attributesMap[attr.name];
const transformer = attributeTransforms[attr.name];
if (svgAttrName) {
const svgAttrValue = transformer ? transformer(attr.value) : attr.value;
svgPath.setAttribute(svgAttrName, svgAttrValue);
}
});

return svgPath;
Expand All @@ -50,20 +52,20 @@ function transformNode(node, parent, root, defs) {

if (node.tagName === 'group') {
const groupNode = root.createElement('g');

const attrs = new Map();
Array.from(node.attributes).forEach(attr => {
const svgAttr = groupAttrsMap[attr.name];
if (svgAttr.transform) {
const prevTransform = attrs['transform'] || {};
const prevTransform = attrs['transform'] || {};
prevTransform[svgAttr.transform] = attr.value;
attrs.set('transform', prevTransform);

} else {
attrs.set(svgAttr, attr.value);
}
});

if (attrs.size > 0) {
const transforms = attrs.get('transform');
if (transforms) {
Expand All @@ -73,19 +75,19 @@ function transformNode(node, parent, root, defs) {


const pivotX = transforms.pivotX || 0;
const pivotY = transforms.pivotY || 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 hasRotation = rotation !== 0;

const t = [];

if (hasScale) {
t.push(`scale(${scaleX}, ${scaleY})`);
}
Expand All @@ -101,11 +103,11 @@ function transformNode(node, parent, root, defs) {
if (hasPivot) {
// TODO: Have no idea for now :(
}

if (t.length) {
groupNode.setAttribute('transform', t.join(' '));
}
attrs.delete('transform');
attrs.delete('transform');
}

attrs.forEach((value, key) => {
Expand All @@ -114,7 +116,7 @@ function transformNode(node, parent, root, defs) {
}

let prevClipPathId = null;

Array.from(node.childNodes).forEach(it => {
const childPath = transformNode(it, node, root);

Expand All @@ -138,7 +140,7 @@ function transformNode(node, parent, root, defs) {
groupNode.appendChild(childPath);
}
});

return groupNode;
}

Expand Down Expand Up @@ -177,65 +179,65 @@ function removeDimenSuffix(dimen) {
function transform(content, options) {

const parser = new DOMParser();
const doc = parser.parseFromString(content);
const doc = parser.parseFromString(content);

const vectorDrawables = doc.getElementsByTagName("vector");
if (vectorDrawables.length !== 1) {
throw new Error("VectorDrawable is invalid");
}
const vectorDrawables = doc.getElementsByTagName("vector");
if (vectorDrawables.length !== 1) {
throw new Error("VectorDrawable is invalid");
}

const vectorDrawable = vectorDrawables[0];

const viewportWidth = vectorDrawable.getAttribute("android:viewportWidth");
const viewportHeight = vectorDrawable.getAttribute("android:viewportHeight");
const vectorDrawable = vectorDrawables[0];

const outputWidth = removeDimenSuffix(vectorDrawable.getAttribute('android:width'))
const outputHeight = removeDimenSuffix(vectorDrawable.getAttribute('android:height'));
const viewportWidth = vectorDrawable.getAttribute("android:viewportWidth");
const viewportHeight = vectorDrawable.getAttribute("android:viewportHeight");

const svgNode = doc.createElement("svg");
const outputWidth = removeDimenSuffix(vectorDrawable.getAttribute('android:width'))
const outputHeight = removeDimenSuffix(vectorDrawable.getAttribute('android:height'));

svgNode.setAttribute('id', 'vector')
svgNode.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgNode.setAttribute("width", outputWidth || viewportWidth);
svgNode.setAttribute("height", outputHeight || viewportHeight);
svgNode.setAttribute("viewBox", `0 0 ${viewportWidth} ${viewportHeight}`);
const svgNode = doc.createElement("svg");

const childrenNodes = Array.from(doc.documentElement.childNodes).filter(it => it.tagName);
svgNode.setAttribute('id', 'vector')
svgNode.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgNode.setAttribute("width", outputWidth || viewportWidth);
svgNode.setAttribute("height", outputHeight || viewportHeight);
svgNode.setAttribute("viewBox", `0 0 ${viewportWidth} ${viewportHeight}`);

const defsNode = doc.createElement('defs');
const nodes = childrenNodes.map(it => transformNode(it, doc.documentElement, doc, defsNode));
const childrenNodes = Array.from(doc.documentElement.childNodes).filter(it => it.tagName);

if (defsNode.childNodes.length) {
svgNode.appendChild(defsNode);
}
const defsNode = doc.createElement('defs');
const nodes = childrenNodes.map(it => transformNode(it, doc.documentElement, doc, defsNode));

const nodeIndices = {
g: 0,
path: 0,
}
if (defsNode.childNodes.length) {
svgNode.appendChild(defsNode);
}

nodes.forEach(node => {
const id = node.getAttribute('id');

const currentId = nodeIndices[node.tagName];
if (typeof currentId === 'number') {
nodeIndices[node.tagName] = currentId + 1;
const nodeIndices = {
g: 0,
path: 0,
}

node.setAttribute('id', id || `${node.tagName}_${currentId}`);
svgNode.appendChild(node);
nodes.forEach(node => {
const id = node.getAttribute('id');

});
const currentId = nodeIndices[node.tagName];
if (typeof currentId === 'number') {
nodeIndices[node.tagName] = currentId + 1;
}

const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgNode);
node.setAttribute('id', id || `${node.tagName}_${currentId}`);
svgNode.appendChild(node);

if (options) {
if (options.pretty) {
return require('xml-formatter')(svgString);
});

const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgNode);

if (options) {
if (options.pretty) {
return require('xml-formatter')(svgString);
}
}
}
return svgString;
return svgString;
}

module.exports = {
Expand Down
2 changes: 1 addition & 1 deletion tests/svgs/sample-01.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 23e0e69

Please sign in to comment.