Adjust the dimensions of an SVG using a dynamic animation

Question

Adjust the dimensions of an SVG using a dynamic animation

I have a svg image embedded in this object:

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg"></object>

I am looking to create an animation that will make the svg image visible on scroll. I have successfully set up the scroll callback function, but now I need help implementing the animation.

The desired animation effect is to start with the svg image at 0% width, and then have it expand to its full size of 100% when the callback is triggered. The animation should take 3 seconds, gradually increasing the size from 0% to 100% over this duration.

To achieve this, I attempted the following steps: 1) Initially setting the width attribute of the object "firstrule" to 0%

<object id="firstrule" type="image/svg+xml" data="/assets/rules/pertinance.svg" width="0%"></object>

2) Trying to animate the width using jQuery

$('#firstrule').animate({'width':'100%'},3000);

However, this approach did not work as expected, yielding the error:

TypeError: Cannot set property 'cur' of undefined

Do you have an alternative solution (perhaps involving CSS3), or ideas on how to troubleshoot this issue? I am seeking a straightforward resolution without the need for excessive code or plugins. Any insights on overcoming this challenge would be greatly appreciated.

javascript jquery css svg

Answer 1

Answer №1

Here's a simple trick you can use: Instead of animating the <object> directly, place it inside a wrapping <div> and animate the container instead.

<style>
    #wrapper { width: 0; }
    #firstrule { width: 100%; height: 100%; }
</style>

<div id="wrapper">
    <object id="firstrule" 
        type="image/svg+xml" 
        data="/assets/rules/pertinance.svg">
    </object>
</div>

<script>
    function animate() {
        $("#wrapper").animate({ width: "100%" }, 3000);
    }
</script>

Check out this JSFiddle example

Answer 2

Here's a simple trick you can use: Instead of animating the <object> directly, place it inside a wrapping <div> and animate the container instead.

<style>
    #wrapper { width: 0; }
    #firstrule { width: 100%; height: 100%; }
</style>

<div id="wrapper">
    <object id="firstrule" 
        type="image/svg+xml" 
        data="/assets/rules/pertinance.svg">
    </object>
</div>

<script>
    function animate() {
        $("#wrapper").animate({ width: "100%" }, 3000);
    }
</script>

Check out this JSFiddle example

Answer 3

Answer №2

If you're looking to engage directly with the object, javascript is your trusty companion:

var i = 0;

var repeat

function move() {


    repeat = setInterval(function () {
        adjust();
    }, 1);

    function adjust() {
        document.getElementById("firstrule").style.width = i + '%';
        document.getElementById("firstrule").style.height = i + '%';
        i++;
        if (i >= 100) {
            clearInterval(repeat);
        }
    }


}

JSFIDDLE

Answer 4

If you're looking to engage directly with the object, javascript is your trusty companion:

var i = 0;

var repeat

function move() {


    repeat = setInterval(function () {
        adjust();
    }, 1);

    function adjust() {
        document.getElementById("firstrule").style.width = i + '%';
        document.getElementById("firstrule").style.height = i + '%';
        i++;
        if (i >= 100) {
            clearInterval(repeat);
        }
    }


}

JSFIDDLE

Adjust the dimensions of an SVG using a dynamic animation

Answer №1

Answer №2

Similar questions

Create dynamic text on an HTML canvas starting from the center, displaying one character at a time while constantly adapting to the formatting

Utilizing Async / Await in the created lifecycle hook - Vue2

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

`Take action on a row by selecting the Edit option in CodeIgniter`

Using Node.js to handle reading files and dealing with undefined or null values

Could someone please assist me in improving my comprehension of this tutorial?

Changing the behavior of one div when the mouse hovers over another div

Updated navigation bar and optimized for mobile devices

What is the best way to reset Owl Carousel following an ajax request?

Angular 2's Component background color styling

Is it not possible to update the innerHTML stored in a variable in real-time?

Could someone assist me in figuring out the reason behind my fetch method sending undefined values?

What is the best way to center a CSS box on the screen?

Firefox and Internet Explorer do not support CSS transitions

Font reference in IE and Chrome causing HTTPS to fail

Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Relocate the resizable handles in jQuery outside of the div elements

Tips for ensuring that the dropdown is always visible in v-autocomplete/v-select

Angular: Modify value when checkbox is ticked

Creating a full-width layout with CSS div