Creating a custom SVGO plugin to store the value of attr() before removing it

I am currently working on creating a custom plugin for SVGO that will batch clean and format SVG files exported from Illustrator.

My main objective is to group elements with similar attributes by assigning them a common class, instead of having separate classes for each individual element.

Everything seems to be functioning well, except for when I attempt to remove the classes from the elements. At that point, the loop seems to lose its tracking ability, and I am struggling to identify the cause of this issue.

If anyone has any insights or suggestions on how to resolve this problem, I would greatly appreciate it!

Below is an excerpt from the section of my code where the issue arises:

// Prior to this, looping through elements with conditions to preserve <g></g> as "g"
var myclass;
g.content.forEach(function(inner){
  if (inner.hasAttr("class")){
    myclass = inner.attr('class').value; // This line functions correctly
    inner.removeAttr('class'); // Removing the class causes issues even though it's called after (myclass = "")
    }
});

g.addAttr({
  name: 'class',
  value: myclass,
  prefix: '',
  local: ''
});

Answer №1

class attribute is handled by a specific CSSClassList, which means it's not intended to be removed. This feature was implemented relatively recently (around version 1.0) to better manage styles, especially for plugins like inlineStyles and minifyStyles. After reviewing the code in lib/svgo/css-class-list.js, it appears that using something like

inner.attr('class').setClassValue()
with an empty or undefined parameter value should remove all classes. However, please note that I have not personally tested this approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine whether the current time falls within the specified time slots and check if the day is included in the provided array of days

Listing my Weekly Schedule: weekly_schedule: any[] = [ { id: 0, value: 'Monday' }, { id: 1, value: 'Tuesday' }, { id: 2, value: 'Wednesday' }, { id: 3, value: ...

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

Can you explain the distinction between using 'List' and 'Rawlist' with Inquirer?

When using inquirer, I have the option to create either a 'list' type or a 'rawlist' type for user selection. My current task involves allowing the user to choose an item from an array of products retrieved from a SQL database. However ...

The screen reader is only able to detect the JQuery dialog box located at the bottom of the page

I am facing an issue with three jQuery dialog boxes on my website. Two of them work perfectly fine, where a screen reader reads the content as soon as they open. However, the third one, named surveyDialog, is only read at the very end after reading everyth ...

Changing the color of a single child object in Threejs

Hey there, I'm facing an issue with changing the color of a specific element in my 3D Model (imported using the GLTFLoader). I've included some images showcasing the model's structure. The element I'm trying to target is the one highli ...

Transferring Information between JavaScript and Python

How can I efficiently transfer data received in JavaScript to a Python program for processing? The data arrives as a string in JavaScript on my browser, but my Python program requires this string to perform specific tasks. What is the best way to pass the ...

Using HTML and CSS to create a Contact Form

Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...

Angular router.redirect is not able to pass variables as expected

I am facing an issue with the router redirect and template lifecycle while using Stripe checkout in my Angular 5 project. After a user signs up, I trigger the stripe checkout modal. Once the modal receives a payment source token, I perform some additional ...

Guide to utilizing various functions, with equations, within a specific scope in angularJS

myApp.controller('incomeController', ['$scope', function($scope) { $scope.pay = 0; $scope.hours = 0; $scope.tax=0.19297; $scope.total = function() { return $scope.pay * $scope.hours;} $scope.taxTotal ...

Increasing the size of an SVG using CSS beyond 100% dimensions

Is there a way to enlarge an SVG using CSS that exceeds 100% of the original image size? I am currently displaying the SVG in an img tag and have removed the height and width attributes from the SVG file. I have attempted to adjust the height and width u ...

Express does not transfer objects to the view layer

I'm attempting to transfer a user object from passport to the browser, but when I check the console all I see is window.user undefined. Within the route, I've confirmed the object's existence with console.log("USER:"+JSON.stringify(req.user ...

Using jQuery to capture the click event of a dynamically generated button within an ASP Repeater

I'm fairly new to jQuery and encountering difficulties in capturing button click events in jQuery from buttons created within an ItemTemplate in an ASP Repeater. Despite spending several hours searching for a solution, I haven't been successful ...

Sending a JS function to a PHP script

I've been incorporating the Soundcloud API into my project and successfully implemented their record button on my website. Once the upload is completed, the code generates the URL of the newly created soundcloud file. My goal now is to pass that URL ...

Troubleshooting problem with Angular 2 in Internet Explorer related to the use of [style]="

I've encountered a challenge while using angular 2 (2.0.0-beta.17). The app works perfectly on most browsers, but as expected, IE 11 is causing trouble. The scripts included in the head for angular are: <script type='text/javascript' sr ...

Slow rendering occurs with unthrottled range input, even with proper throttling applied

I'm currently seeking some general guidelines because I'm unsure where to turn for help at the moment. The issue I am facing involves an uncontrolled input[type=range] slider that performs very slowly when there are numerous steps (works fine wi ...

Navigate to a unique component

I am attempting to navigate to the location of a custom component, but the reference to it is not returning a valid HTML node. The function "goToContactUs" should execute this action. What would be the most effective approach to accomplish this? class H ...

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

Steer clear of null validations when handling loaded .obj models in Three.js

In my Angular project, I am utilizing three.js to load a simple .obj file and animate it on the canvas. Everything is functioning properly, but I find myself needing to explicitly check for null in my animate() function to determine if the model has been ...

Urgent concern: the require function is being utilized in a manner that prevents the static extraction of dependencies [mysterious]

After implementing the magic-sdk version 8.0.1 on my project, I encountered the following warning message: warn - ./node_modules/magic-sdk/dist/es/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically e ...

Only retrieve and parse newly added items since the previous call, using JSON

Struggling to figure out how to make this piece of code return only newly added items from a JSON URL. I've been considering pushing the ID into an array and then doing a comparison, but all my attempts so far haven't panned out. Ultimately, I&a ...