Variable and equation in SVG?

Asked Feb 08 '21 at 07:52

Active Feb 08 '21 at 07:52

Viewed 132 times

For example, imagine, I want to create a rectangle in SVG where the height is equal to (3*width)^2+width and add, at the bottom, a circle of radius width/2 (cx,cy, r = f( width)). Everything depends only of one parameter : the rectangle width. I know it is possible to do it with javascript but I would like something more direct. Is it ccs variable, the only alternative ? Thanks for answer.

Rq : I read this post (How do I define or reference a variable in SVG?) but it is rather old (from 2015) and it seems the situation has not so much evolved or I googled poorly.

asked Feb 08 '21 at 07:52

Stef1611

1,978
2
11
30

Please post any try you have done yet? – Ahmed Ali Feb 08 '21 at 07:53
@RobertLongson. The tranformation is not linear : height=3*witdh^2+width (for example). And I plan to do things with cosine functions. – Stef1611 Feb 08 '21 at 07:57
Then I think you need javascript. – Robert Longson Feb 08 '21 at 07:59
@RobetLongson. Are css (or scss) variables a better way to do that ? https://www.zdnet.com/article/css-to-get-support-for-trigonometry-functions/ – Stef1611 Feb 08 '21 at 08:03
1

why SVG? this seems pretty easy with CSS only – Temani Afif Feb 08 '21 at 08:29

Variable and equation in SVG?

0 Answers0