CODEWITHSUNDEEP
javascriptcssanimationsvg
user2095819
user2095819

Reputation: 21

How to resize an SVG animation?

I am stuck at resizing an svg animation to a different percentages of the page.

I have created a circle that increases its size and then goes back to normal with this:

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5">
<animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite"/>
</circle>
</svg>

Then, when I change the área size of the svg, the circle does not change its size nor the position within this area.

I have tried to scale the animation with CSS giving size to the body in pixels and then assign an area to the SVG in percentages:

body{
width: 1440px;
heigth: 990px
}

#mySVG{
width: 100%;
}

Also, I tried to change size with javascript:

function resize(){
var svg = document.getElementById("mySVG");
        svg.style.width = window.innerWidht;
svg.style.height = window.innerHeight;
}

None of them worked… wondering what is the best method to scale SVG animations not only with this circle but with SVG animations in general.

Thank’s in advanced.

Upvotes: 1

Views: 4418

Answers (1)

Paulie_D
Paulie_D

Reputation: 115066

You have to use a viewbox to define the co-ordinate space. E.G.

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"
 viewbox="0 0 1200 1200">

The viewBox attribute allows to specify that a given set of graphics stretch to fit a particular container element.

The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio.

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1200 1200">
    <circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5">
        <animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite" />
    </circle>
</svg>

Useful SVG Resource Article @ CSS-Tricks.com

MDN Link

Upvotes: 5

Related Questions