How to change the width of an svg rect with css

Question

Is is possible to change width of SVG rectangle with CSS?

This doesn't work:

#red {
    width: 800px;
}
#red:hover {
    width: 1600px;
}

See jsfiddle.

yes, you can do, check this example ..http://blog.studio.gd/blog/id/10/how_to_style_svg_with_css_-_part_2-3 — Kheema Pandey, Feb 28 '14 at 07:42
Thanks, with scale it could work but the position isn't right: http://jsfiddle.net/fJLCg/17/ — l00per, Feb 28 '14 at 08:18

Erik Dahlström · Answer 1 · 2014-02-28T10:57:30.383

12

Since the width css property doesn't (yet) apply to <rect> elements you can't do it like in your question.

However, you can make it work by using units that depend on some other css property.

Like this, svg:

<rect id="red" width="1em" fill="red" height="270" />

and CSS:

#red {
    font-size: 800px;
}
#red:hover {
    font-size: 1600px;
}

See jsfiddle.

To answer the followup question, "how do you do this if you want to grow the height (or width) in the opposite direction?", here's one way:

Flip the coordinate system using transform="scale(1,-1)" (adjusting the other values to go along with that, e.g negative y coordinate position).

<rect id="red" y="-515.5" width="270" height="2em" transform="scale(1,-1)"/>

and CSS:

#red:hover {    
    animation: scaleheight 1s ease-in-out infinite alternate;
}

@keyframes scaleheight {
    0% {
         fill:red;
    }
    100% {
         fill:blue;
         font-size: 300px;
    }
}

See jsfiddle.

edited Feb 28 '14 at 10:57

answered Feb 28 '14 at 09:18

Erik Dahlström

59,452
12
120
139

Oh, this looks good :) Would it possible to change „height“ – bottom to top as well? – l00per Feb 28 '14 at 09:56
Not sure what you mean. – Erik Dahlström Feb 28 '14 at 10:00
Sorry ;) I mean, would it possible to scale from bottom to top? Like this but in the another direction? http://jsfiddle.net/uH6j5/3/ – l00per Feb 28 '14 at 10:05
Great solution, thanks! I created an example that uses an image pattern and percentage values, based on your solution - https://codepen.io/TheRemoteCoder/pen/JjKwWxd – TheRemoteCoder Nov 12 '20 at 10:34

Kheema Pandey · Answer 2 · 2014-02-28T10:39:24.080

0

I've made some SVG animation for you. Check the below link shows examples like SVG Scalingand SVG element Movement. As example shows you can create many rec and animate them as way you want.

Check the Update Demo. http://jsfiddle.net/kheema/CasPj/11/

edited Feb 28 '14 at 10:39

answered Feb 28 '14 at 08:50

Kheema Pandey

9,977
4
25
26

Looks good, but it should change the height or with of a rectangle like this: http://jsfiddle.net/fJLCg/17/ – l00per Feb 28 '14 at 09:59
okay, do you want this way? please check the updated fiddle link. http://jsfiddle.net/kheema/CasPj/11/ – Kheema Pandey Feb 28 '14 at 10:39

score -1 · Answer 3 · edited May 23 '17 at 11:53

-1

Yes, its possible. Make an svg file with a rectangle, and then import it to your html with img tag.

See: link

edited May 23 '17 at 11:53

Community

1
1

answered Feb 28 '14 at 07:58

garyry

61
8

Okay, but if I have 30 rectangles I've to create 30 SVG files and import in my html as img tag? Is there any other solution to transform the size with IDs? – l00per Feb 28 '14 at 08:20
You would make a single svg and use 30 times. – Altimus Prime Dec 11 '17 at 21:14

How to change the width of an svg rect with css

3 Answers3

Linked