Breaking News: Grepper is joining You.com. Read the official announcement!

svg in js set

Sasuke Uchihas answered on December 1, 2023 Popularity 2/10 Helpfulness 1/10

answer svg in js set

svg in js set

Comment

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
            <rect width="100%" height="100%" fill="#000" />
            <!-- <polygon fill="red" points="205,462 292,400 346,483.9 258,526 "/> -->

            </svg>   

// targeting the svg itself
const svg = document.querySelector('svg');

// variable for the namspace
const svgns = 'http://www.w3.org/2000/svg';

// make simple rectangles
let newRect1 = document.createElementNS(svgns, 'polygon');

// set attributes of new rectangles
gsap.set(newRect1, {
  attr: {
    x: 50,
    y: 150,
    width: 100,
    height: 100,
    fill: 'red',
    class: 'target',
    points: '205,462 292,400 346,483.9 258,526',
  },
});

// append the new rectangles to the svg
svg.appendChild(newRect1);

document.querySelector('.col').addEventListener('mouseenter', () => {
  gsap.to(newRect1, {
    attr: {
      x: 150,
      y: 150,
      width: 100,
      height: 100,
      fill: '#5cceee',
      class: 'target',
      points: '205,462 267,496 346,483.9 258,526',
    },
  });
});

document.querySelector('.col').addEventListener('mouseleave', () => {
  gsap.to(newRect1, {
    attr: {
      x: 50,
      y: 150,
      width: 100,
      height: 100,
      fill: 'red',
      class: 'target',
      points: '205,462 292,400 346,483.9 258,526',
    },
  });
});

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript set svg

Link to this answer
Share Copy Link

Contributed on Dec 01 2023

Sasuke Uchihas

0 Answers Avg Quality 2/10

svg in js set

Contents

More Related Answers

svg in js set

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.