Why isn't the color of the circle changing in the console when I type this.fill = "black"?

Question

Why isn't the color of the circle changing in the console when I type this.fill = "black"?

I am creating circles as a hobby, using a function to generate them. However, I am facing an issue with changing their parameters in the console after creation. Specifically, I am unable to change them in this manner and I'm wondering why not.

a.fill = "black"; does not successfully update the circle object's parameter when executed in the console.

const container = document.body
let svgContainer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgContainer.style.width = "100vw"
svgContainer.style.height = "100vw"
svgContainer.setAttribute("viewBox", "0 0 500 750");
container.appendChild(svgContainer);

function makeCircle(cx, cy, r, fill, stroke, id) {
  this.cx = cx;
  this.cy = cy;
  this.r = r;
  this.fill = fill;
  this.stroke = stroke;
  this.id = id;
  let newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  newCircle.setAttribute("cx", cx);
  newCircle.setAttribute("cy", cy);
  newCircle.setAttribute("r", r);
  newCircle.setAttributeNS(null, 'fill', fill);
  newCircle.setAttributeNS(null, 'stroke', stroke);
  svgContainer.appendChild(newCircle);
}

let a = new makeCircle(50, 300, 20, '#493fea', 'green');

javascript svg

Answer 1

Answer №1

Is it possible to modify their parameters in the console after they are created? Why does it not work?

The reason you cannot do this is because when you create a new object with a property like cx, for example, and separately create a

<circle cx="..." />

, the property in your created object and the attribute on the <circle /> are not connected to each other once they are initially set. In order to change the property and have the attribute updated as well, you need to establish this connection.

Here's an example that demonstrates how to achieve this. It involves a generic function that takes the name of an element and a list of its specific SVG attributes, returning a function similar to your makeCircle but with properties linked to the object.

Instead of individual attributes like

makeCircle(cx, cy, r, fill, stroke, id)

, this generic function accepts a single object with the desired attributes:

makeCircle({ cx, cy, r, fill, stroke, id })

.

This example includes various tools such as converting attribute names to property definitions, creating properties that get/set values from attributes, and defining shared SVG attributes for elements.

It also demonstrates how to dynamically create SVG elements using factory functions, define properties based on specified attributes, and manipulate those properties later on.

While this is a simple example, there is room for improvement in the code. For instance, all properties currently return strings instead of numbers.

Answer 2

Is it possible to modify their parameters in the console after they are created? Why does it not work?

The reason you cannot do this is because when you create a new object with a property like cx, for example, and separately create a

<circle cx="..." />

, the property in your created object and the attribute on the <circle /> are not connected to each other once they are initially set. In order to change the property and have the attribute updated as well, you need to establish this connection.

Here's an example that demonstrates how to achieve this. It involves a generic function that takes the name of an element and a list of its specific SVG attributes, returning a function similar to your makeCircle but with properties linked to the object.

Instead of individual attributes like

makeCircle(cx, cy, r, fill, stroke, id)

, this generic function accepts a single object with the desired attributes:

makeCircle({ cx, cy, r, fill, stroke, id })

.

This example includes various tools such as converting attribute names to property definitions, creating properties that get/set values from attributes, and defining shared SVG attributes for elements.

It also demonstrates how to dynamically create SVG elements using factory functions, define properties based on specified attributes, and manipulate those properties later on.

While this is a simple example, there is room for improvement in the code. For instance, all properties currently return strings instead of numbers.

Answer 3

Answer №2

If you're looking to have some fun while creating circles, try this quirky approach:

Start by running the SO snippet and clicking on the viewBox.

customElements.define("svg-measles", class extends HTMLElement {
  connectedCallback() {
    this.style.display = "inline-block";
    this.style.width   = "100vw";
    this.style.height  = "100vh";
    this.colors = ['red','orange','yellow','green','blue','indigo','violet'];
    this.innerHTML = `<svg style="width:100%;height:100%" viewBox="${this.getAttribute("viewbox")}"/>`;
    let svg = this.querySelector("svg");
    this.makeCircle("50%", "50%", 10, '#493fea', 'green');
    this.onclick = (evt) => {
      let svg = this.querySelector("svg");
      let pt  = svg.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      let {x,y} = pt.matrixTransform(svg.getScreenCTM().inverse());
      this.makeCircle(x, y, 10, 'green', 'yellow');
    }
  }
  makeCircle(cx, cy, r, fill, stroke, id) {
    this.colors.unshift(fill = this.colors.pop());
    this.querySelector("svg")
        .insertAdjacentHTML("beforeend", 
                            `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" stroke="${stroke}"/>`);
  }
});

<svg-measles viewBox="0 0 300 200"></svg-meales>

Answer 4

If you're looking to have some fun while creating circles, try this quirky approach:

Start by running the SO snippet and clicking on the viewBox.

customElements.define("svg-measles", class extends HTMLElement {
  connectedCallback() {
    this.style.display = "inline-block";
    this.style.width   = "100vw";
    this.style.height  = "100vh";
    this.colors = ['red','orange','yellow','green','blue','indigo','violet'];
    this.innerHTML = `<svg style="width:100%;height:100%" viewBox="${this.getAttribute("viewbox")}"/>`;
    let svg = this.querySelector("svg");
    this.makeCircle("50%", "50%", 10, '#493fea', 'green');
    this.onclick = (evt) => {
      let svg = this.querySelector("svg");
      let pt  = svg.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      let {x,y} = pt.matrixTransform(svg.getScreenCTM().inverse());
      this.makeCircle(x, y, 10, 'green', 'yellow');
    }
  }
  makeCircle(cx, cy, r, fill, stroke, id) {
    this.colors.unshift(fill = this.colors.pop());
    this.querySelector("svg")
        .insertAdjacentHTML("beforeend", 
                            `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" stroke="${stroke}"/>`);
  }
});

<svg-measles viewBox="0 0 300 200"></svg-meales>

Why isn't the color of the circle changing in the console when I type this.fill = "black"?

Answer №1

Answer №2

Similar questions

Discover the precise number of columns and rows that make up a circle

"Struggling with Mongoose's Inaccurate Value Saving

Guide on setting up the installation process of Gulp jshint with npm?

What is preventing me from setting a value to a React hook input?

Divide the division inside the box by clicking on it

Ways to conceal an item by considering the size of a different element

Utilizing getUserMedia to capture portrait shots with the back camera

How to trigger an Angular JS route without loading a view

Tutorial on integrating jquery ui's '.droppable' feature with the jQuery '.on' method

Updating the jQuery mobile webpage

How to dynamically reset an ng-form in Angular

How to refresh an image in Next.js using setState even when the src path remains unchanged

Encountering a Next.js error while trying to link to a dynamic page

Using Conditions in a Javascript For Loop

Using the ng-repeat directive along with the string replace expression allows for dynamically

Utilize Photoshop's Javascript feature to extract every layer within the currently active document

What steps should I take to move the content to the bottom of the page once the promise is fulfilled within the function?

Transition from traditional class-based components to functional components

Error: Unable to access attribute 'item_name' as it is not defined

Tips on how to adjust the HTML5 input type attribute in ios 5 to display the current date and time