CODEWITHSUNDEEP
javascriptcsssvg
frogatto
frogatto

Reputation: 29285

SVG cover parent

I created a svg tag using this command:

var NS = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(NS, "svg");
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
elem.setAttribute("width", "100%");
elem.setAttribute("height", "100%");
parent = document.getElementById("parent");
parent.appendChild(elem);

CSS:

div.parent {
            width:500px;
            height:1000px;
            border:solid 1px black;
            border-radius:10px;
            margin:50px;
            background:radial-gradient(circle,white 95%,silver);
            box-shadow:0 0 10px black;
            overflow:hidden;
        }

HTML:

<div id="parent" class="parent"></div>

But this svg did not cover entire space of it's parent, Why?
Please help me, Thanks

Upvotes: 0

Views: 1082

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Set your viewBox attribute to the size of your content. Note that percentage values are not allowed in a viewBox. Also note that viewBox is case-sensitive - it has a upper-case 'B'.

So if your content occupies the area from 0,0 to 300,200, the SVG element should look like:

<svg width="100%" height="100%" viewBox="0 0 300 200">

The SVG should then be scaled to fill its container. Or, more accurately, it will be scaled up so that it fits inside the container but keeps it's aspect ratio. If your container is a different shape (aspect ratio) and you want it to be stretched horizontally and vertically to fit exactly, then use:

<svg width="100%" height="100%" viewBox="0 0 300 200" preservAspectRatio="none">

I have modified your example to demonstrate:

http://jsfiddle.net/du5tg/1/

Upvotes: 1

visualex
visualex

Reputation: 756

the parent needs to have a height specified, if you want it to be 100%, the parent nodes will have to have 100% set to them too. if you want it to fill the screen, set html,body to 100% height and the child nodes as well.

have a look: http://jsfiddle.net/xLkf2/1/

.parent{width:200px; height:200px; background:grey;}

Upvotes: 1

Related Questions