"Unable to modify the color of an SVG element within a FabricJS canvas

I am attempting to modify the fill of an SVG path that is located within a fabric.js canvas.

https://i.sstatic.net/047kl.png

Here is the function I am using:


function changeColor(material) {
    console.log(svgGroup[0].fill)
    console.log(material);
    if (material == 'base') {
        svgGroup[0].fill = '#000000';
        console.log(svgGroup[0].fill)
    }
    texture.needsUpdate = true;
    object.children[0].material = textureMaterial;
    canvas.renderAll();
}

However, the changes are not being applied automatically.

https://i.sstatic.net/WNdE1.png

Does anyone have any insights on why this might be happening? Any input would be appreciated.

javascriptthree.jsfabricjs

Answer №1

After some troubleshooting, I finally figured out the solution. The issue was that I had not set the color correctly in my code. Instead of using this:

svgGroup[0].fill = '#000000';

I should have used this approach:

svgGroup._objects.forEach(obj => {
    if (obj.id == material) {
        obj.set('fill', color);
    }
});

By making this change, the rendering works perfectly when the renderAll() function is called.

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

Is it possible to use jQuery validate for remote parsing with two fields in a single call

Currently, I am facing an issue while trying to parse two values using jQuery's validate plugin to compare with an SQL database. The DateReceived value is successfully parsed, but the CentreID value always appears as null. Below is the code snippet I ...

javascriptphpjquerysqlvalidation

Unable to retrieve an image from various sources

My setup includes an Express server with a designated folder for images. app.use(express.static("files")); When attempting to access an image from the "files" folder at localhost:3000/test, everything functions properly. However, when trying to ...

javascriptnode.jsexpress

Issue encountered in transmitting information from JSP to servlet

I am facing an issue with receiving data from JSP to servlet. I understand that I need to serialize this data using JSON. In my JSP, I have written the following JavaScript code: var myJSONText = JSON.stringify(items); document.getElementById('test&a ...

javajavascriptjsonservlets

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Currently in the main component, it is set to automatically redirect to the Login page. However, I want to implement a check to see if a token is already stored in the local storage. If a token exists, I want the application to skip the Login page and dire ...

javascriptreactjscookiesreduxreact-redux

The functionality of Node async/await appears to be malfunctioning

In an effort to streamline my code and reduce the number of callbacks, I decided to explore using async/await. However, I encountered a problem where Express renders the view before the query is complete. The query results are correct, but they come after ...

javascriptnode.jsexpressasync-await

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

javascriptjqueryhtmlcssgoogle-chrome

Can anyone offer me advice on troubleshooting a failed Capifony deployment caused by a time out during the assetic:dump process?

$ cap deploy Unfortunately, the deployment process is failing and I am receiving the following error message: * executing "cd /var/www/site/prod/releases/20120831164520 && php app/console assetic:dump web --env=prod --no-debug" servers: ["site ...

javascriptdeploymentsymfonyyuicapifony

Tips for automatically closing all other divs when one is opened

I have multiple divs structured like this: <div id="income"> <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> <div id="incometoggle"> <h6>Income Total</h6> </div> </div> <d ...

javascriptjqueryhtml

Why won't my Laravel AJAX request work after refreshing the page?

In my Laravel CRUD web application, users can view and edit records with a sorting feature that asynchronously sorts the main records view using AJAX. Everything functions smoothly until a user clicks on a record to edit it. After being redirected through ...

javascriptphpajaxlaravel

The error message "TextEncoder is not defined with mongodb nodes" is indicating that there is

Encountering an issue while running jest test cases: Getting the error message - ReferenceError: TextEncoder is not defined. Current Node version being used is 14.18.0. Mongodb NPM package version is 4.1.3. Typescript version installed is 4.4.3. Here ...

javascriptnode.jstypescriptmongodbexpress

Error in Typescript persists even after short-circuit evaluation is used

Kindly review the provided code sample type type1 = string[] | undefined; let variable1 : type1 = undefined; console.log(variable1 && variable1.length); Upon attempting to run this code in Typescript Playground, an error is generated stating Pro ...

javascripttypescriptcompiler-errors

Node.js throws an error when accessing req.body as undefined

My task involved creating a basic API using node.js and express, with the addition of body-parser. However, I encountered an issue where req.body was returning undefined. Here is a snippet of my app.js: const express = require('express'); const b ...

javascriptnode.jsexpressundefinedbody-parser

Position the text alongside the thumbnail rather than in the center

In the current setup, my username text is positioned in the center of the view. I want to reconfigure it so that it displays directly to the right of the thumbnail. However, removing the alignItems: 'center', property from the item disrupts the e ...

javascriptcssreactjstypescriptreact-native

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

Freezing Columns and Rows for a Spacious Scrollable Table

After extensive effort, I have been diligently striving to create a solution that allows a table's column headers to scroll with the body horizontally and the first column to scroll with the rows vertically. While I've come across solutions that ...

javascriptjqueryhtmlcss

Having trouble with Postgres not establishing a connection with Heroku

My website is hosted on Heroku, but I keep encountering the same error message: 2018-05-06T19:28:52.212104+00:00 app[web.1]:AssertionError [ERR_ASSERTION]: false == true 2018-05-06T19:28:52.212106+00:00 app[web.1]:at Object.exports.connect (_tls_wrap.js:1 ...

javascriptnode.jserror-handlingnode-modulesheroku-postgres

Having Trouble Rendering EJS Files in HTML: What Am I Doing Wrong?

I'm having trouble displaying my EJS files as HTML. Whenever I try to access my EJS file, I receive a "Cannot GET /store.html" error message. if (process.env.NODE_ENV !== 'production') { require('dotenv').config() } const stri ...

javascriptnode.jsexpress

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

javascriptangulartypescriptionic-frameworkionic2

Ways to stop the click event from being triggered in JQuery

There is a single toggle switch that, when clicked, switches ON and a popup with close and OK buttons appears. However, if the toggle is clicked again, it switches OFF and disappears. The specific requirement is that with every click where the toggle switc ...

javascripthtmljquerycss

Is it possible to create a new field in mongoDB from a separate collection without any dependencies?

I manage two different sets of data: profiles and contents The profiles collection is structured as follows: { _id: ObjectId('618ef65e5295ba3132c11111'), blacklist: [ObjectId('618ef65e5295ba3132c33333'), ObjectId('618ef65e5295 ...

javascriptnode.jsmongodbmongodb-query