0

I'm learning svg and I'm trying to add an svg shape to my page but I'm getting a wired padding how can I make the svg path take the full width and height of svg element.

Here is the code: https://jsfiddle.net/Marshall7/z14z76h2/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.3,40.2c-0.4-5.8-1-11.1-2-15.9c-0.4-2.1-0.9-4.1-1.4-6c-0.1-0.5-0.3-0.9-0.4-1.3c-2-6.5-4.3-10.4-6.9-11.6   c-2.8,1.3-5.1,5.6-7.2,12.9c-0.9,3.1-1.6,6.5-2.2,10.1c-1,6.4-1.5,13.5-1.6,21.3v2.2c0,7.9,0.6,15,1.6,21.4c0.6,3.5,1.3,6.9,2.2,10   c2.1,7.4,4.5,11.1,7.2,11.1c2.6,0,4.9-3.2,6.9-9.7c0.1-0.5,0.3-1,0.4-1.4c0.1-0.4,0.2-0.8,0.3-1.1c0.4-1.5,0.8-3.1,1.1-4.7   c0.6-3.1,1.1-6.3,1.5-9.8c0.5-4.8,0.8-10,0.9-15.5v-2.6C60.6,46.3,60.5,43.1,60.3,40.2z M49.7,91.8l0-40.2l-3.7,1.8l3.7-45.7   l0,40.2l3.7-1.8L49.7,91.8z"></path></g></svg>

CSS:

body{
    background: #fff;
}
svg{
    background: #777;
    height: 200px;
    transform: rotate(90deg);
    fill : red;
}

I don't want the gray area space the width maintain itself.

Termininja
  • 6,620
  • 12
  • 48
  • 49
Marshall
  • 19
  • 4

1 Answers1

1

If you want the path to fill the SVG, then you should set your viewBox attribute to match the bounding box of the path. It is the viewBox that tells the browser how to scale the content of the SVG to fill the SVG canvas area.

The bounding box of your path is:

x = 38.6
y = 5.4
w = 22.1
h = 89

So if we use these values for the bounding box we get:

body{
  background: #fff;
}
svg{
  background: #777;
  height: 200px;
  fill : red;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="38.6 5.4 22.1 89" xml:space="preserve"><g><path d="M60.3,40.2c-0.4-5.8-1-11.1-2-15.9c-0.4-2.1-0.9-4.1-1.4-6c-0.1-0.5-0.3-0.9-0.4-1.3c-2-6.5-4.3-10.4-6.9-11.6   c-2.8,1.3-5.1,5.6-7.2,12.9c-0.9,3.1-1.6,6.5-2.2,10.1c-1,6.4-1.5,13.5-1.6,21.3v2.2c0,7.9,0.6,15,1.6,21.4c0.6,3.5,1.3,6.9,2.2,10   c2.1,7.4,4.5,11.1,7.2,11.1c2.6,0,4.9-3.2,6.9-9.7c0.1-0.5,0.3-1,0.4-1.4c0.1-0.4,0.2-0.8,0.3-1.1c0.4-1.5,0.8-3.1,1.1-4.7   c0.6-3.1,1.1-6.3,1.5-9.8c0.5-4.8,0.8-10,0.9-15.5v-2.6C60.6,46.3,60.5,43.1,60.3,40.2z M49.7,91.8l0-40.2l-3.7,1.8l3.7-45.7   l0,40.2l3.7-1.8L49.7,91.8z" id="foo"></path></g></svg>

I've removed the rotate transform so you can see that it is correct.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181