search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.07k stars 1.08k forks source link

Set CSS variables with the css setter #1230

Closed Glandos closed 1 year ago

Glandos commented 2 years ago

Feature request

Currently the following code doesn't work as expected:

const draw = SVG()

draw.rect(10, 10).css({ '--myVar': 'black' })

There are 2 issues:

  1. The setter will call camelCase and remove the first dash, leading to an invalid CSS value declaration.
  2. The Typescript definition doesn't allow this because (obviously) --myVar is not a part of CSSStyleDeclaration.

I don't think that 2. is concerning this project, but 1. is :)

I don't see this as a bug report, because in the meantime, we can use attr({ 'style': '--myVar: black'}).

Fuzzyma commented 1 year ago

This ended up being a bit more tricky. However, after 2 years its fair that I finally do it :D

Glandos commented 1 year ago

I think some Typescript part were not possible 2 years ago. I'm not 100% sure… Anyway, thanks a lot!

Fuzzyma commented 3 months ago

I am sorry, I somehow forgot to publish all the fixes I made. I just released it: https://github.com/svgdotjs/svg.js/releases/tag/3.2.1