control svg width using css

Question

I am using a svg image which has default width and height specified in the file. I need to control this width and height through css. Here is the scenario.

svg file 1 -> is a container of size 1000 x 500 px svg file 2 -> is another container of size 1200 x 600 px

I need to place the svg file 3 (size 100 x 200 px) inside these container. I need to adjust the width and height based on the container I placed. So I tried adding the following style inside svg file1 as.

.container1 .object1{
          width: 80px!important;
          height: 60px!important;
}

.container2 .object1{
         width: 120px!important;
         height: 90px!important;
}

But it doesn't override the svg level specification.

Nishanth Nishanth · Accepted Answer · 2015-10-29T06:34:41

I had a similar problem . I was plotting graphs in svg . To change the height and width of the svg , you need to call function that genrates svg again by passing the new parametres.

control svg width using css

1 Answers