Can one manipulate SVG programmatically?

Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered by scrolling.

http://codepen.io/rezen/pen/vEgqs

Any ideas on how this could be modified to achieve the desired effect?

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewport-fill="#00A8A4" width="1200px" height="600px">
<defs>
    <g id="file">

        <path fill="#FFFFFF" opacity=".2" d="M-11.605-11.518c-1.043,0-1.889,0.846-1.889,1.888v147.313c0,1.042,0.845,1.888,1.889,1.888H93.932
            c1.044,0,1.89-0.846,1.89-1.888V13.191L71.111-11.518H-11.605z"/>

        <line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-13.494" y1="137.748" x2="95.822" y2="137.748"/>

        <line fill="none" stroke="#27BBB1" stroke-width="7.8755" stroke-miterlimit="10" x1="-13.494" y1="-9.63" x2="62.041" y2="-9.63"/>

        <line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="65.436" y1="24.866" x2="96.238" y2="24.866"/>

        <path fill="#27BBB1" stroke="#006B64" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M96.527,20.167H63.929c-1.043,0-1.889-0.846-1.889-1.89v-29.795"/>

        <path fill="#004C47" d="M71.111-11.518l24.711,24.709v124.491c0,1.042-0.846,1.888-1.89,1.888H-11.605
            c-1.043,0-1.889-0.846-1.889-1.888V-9.63c0-1.042,0.845-1.888,1.889-1.888H71.111 M71.111-17.424h-82.716
            c-4.298,0-7.795,3.497-7.795,7.794v147.313c0,4.298,3.497,7.794,7.795,7.794H93.932c4.299,0,7.796-3.497,7.796-7.794V13.191
            c0-1.566-0.622-3.069-1.729-4.177L75.288-15.694C74.179-16.802,72.677-17.424,71.111-17.424L71.111-17.424z"/>

    </g>
    <g id="wheel-form">
        <path fill="#004C47" d="M28.396,5.907c12.237,0,22.316,9.96,22.466,22.203c0.074,6.003-2.194,11.677-6.388,15.975
            c-4.193,4.298-9.808,6.705-15.811,6.779l-0.285,0.002c-12.239,0-22.32-9.96-22.471-22.201
            C5.756,16.269,15.716,6.062,28.11,5.909l0.285-0.002H28.396 M28.395,0c-0.119,0-0.239,0.001-0.357,0.002
            C12.36,0.196-0.19,13.061,0.002,28.736c0.192,15.556,12.862,28.036,28.377,28.036c0.119,0,0.239-0.001,0.357-0.002
            c15.674-0.192,28.226-13.058,28.032-28.732C56.577,12.479,43.907-0.001,28.395,0L28.395,0z"/>
        <circle fill="none" stroke="#003D38" stroke-width="11.8133" stroke-miterlimit="10" cx="28.385" cy="28.384" r="9.91"/>
        <path opacity="0.47" fill="none" stroke="#00A79D" stroke-width="3.3441" stroke-linecap="round" stroke-miterlimit="10" d="
        M39.432,28.353c0,6.101-4.947,11.047-11.046,11.047s-11.047-4.946-11.047-11.047"/>
    </g>

    <g id="spokes">

        <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="9.305" y1="28.621" x2="17.521" y2="28.52"/>

        <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="39.315" y1="28.25" x2="47.529" y2="28.15"/>

        <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.174" y1="8.628" x2="28.279" y2="17.122"/>

        <line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.557" y1="39.649" x2="28.662" y2="48.142"/>

        <animateTransform attributeName="transform" type="rotate" from="0, 28.5,28.5" to="360 , 28.5,28.5" dur="2s" repeatCount="indefinite"/>
    </g>

    <path id="conveyer" transform="translate(18, 18)" fill="none" stroke="#002A25" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M893.69,28.622c0,20.935-16.972,37.907-37.908,37.907H29.105c-20.935,0-37.907-16.973-37.907-37.907l0,0
    c0-20.937,16.972-37.908,37.907-37.908h826.677C876.719-9.287,893.69,7.685,893.69,28.622L893.69,28.622z">

    </path>
</defs>
<g id="conveyer-files" transform="translate(70, 46)">
    <g>
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            HTML
        </text>
    </g>
    <g transform="translate(140, 0)">
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            CSS
        </text>
    </g>
    <g transform="translate(280, 0)">
        <use  xlink:href="#file"></use>
        <text x="0" y="124"  style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
            JS
        </text>
    </g>

    <animateTransform attributeName="transform" type="translate" from="70, 46" to="710, 46" dur="8s" repeatCount="indefinite"/>

</g>
<g id="conveyer-full" transform="translate(20, 200)">
    <g transform="translate(20, 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(111.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(203 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    <g transform="translate(294.5 , 18)">
        <use  xlink:href="#wheel-form"/>
        <use  xlink:href="#spokes"/>
    </g>
    
    ...
        
    <use  xlink:href="#conveyer" stroke-width="7" />
    <use  xlink:href="#conveyer" stroke-width="10" stroke-dasharray="12,12" >
        <animate attributeName="stroke-dashoffset" values="600;0" begin="0s" dur="8s" repeatCount="indefinite" /> 
    </use>
</g>
javascriptjqueryhtmlsvg

Answer №1

A potential solution for your situation could involve making modifications to the original SVG definition of the conveyor belt. One option is to utilize a JavaScript library designed specifically for manipulating SVG graphics, such as svgjs

To explore an example of animation in action, check out this demonstration:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing the submission of form post values by using jQuery remote validation

     Within my form, I have incorporated two submit buttons (save & exit, next) and implemented remote email address duplication checks. Everything is functioning properly, however, upon submission of the form, I am unable to determine which specific s ...

javascriptphpjqueryhtmlcodeigniter-3

How can we use jQuery to change the format of a

I'm working on a project where I want the calendar to display the date that the user picks. Right now, my "{{date}}" is in the format 2016-01-11, but it keeps showing one day before the selected date. I would like it to display as mm/dd/yyyy. I belie ...

jqueryhtml

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

What is the necessity of using declare in TypeScript for declaring variables and functions, and when is it not required? For instance, why use declare var foo: number; when let foo: number; seems to achieve the same result (declaring a variable named ...

javascripttypescript

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...

javascriptjqueryhtmlcss

Combining two forms into one PHP page, but intending to submit only a single form

I'm facing an issue on my page where I have both a sign-in and a sign-up form. Whenever I click on either the sign-in or sign-up button, it always ends up submitting the sign-up form. What am I doing wrong? Here's the PHP code snippet: if($_SE ...

javascriptphphtmlajaxforms

Having trouble accessing AJAX POST data in Python?

For this jQuery request, I utilize an HTTP POST. function retrieveData() { const information = JSON.stringify({ "test_id": "1" }); jQuery.post('/retrieveData', information, function (response) { a ...

pythonjqueryjsonajaxflask

Execute HTML code within a text field

Is it possible to run html code with javascript inside a text box, similar to w3schools.com? I am working solely with html and javascript. Thank you. For example, I have two text areas - one for inserting html, clicking a button to run the code, and displ ...

javascripthtml

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

pythonhtmlselenium

Encountering a CORS header issue while working with the Authorization header

Here is the code snippet I am currently working with: https://i.stack.imgur.com/DYnny.png Removing the Authorization header from the headers results in a successful request and response. However, including the Authorization header leads to an error. http ...

javascriptpythonangularjsdjango

Choosing all components except for one and its descendants

I am searching for a method to choose all elements except for one specific element and its descendant, which may contain various levels of children/grandchildren or more. What I'm trying to accomplish is something like... $("*").not(".foo, .foo *").b ...

javascriptjqueryhtmlcss

Setting up a Progressive Web App installation feature with a built-in delay from a

I have integrated a v-dialog component that shows up when my webapp loads and is utilized for installing the PWA: <template> <div> <v-dialog v-model="popupAndroid" max-width="80%" ...

javascriptvue.jsvuetify.jsprogressive-web-apps

The table is unable to properly display the array data

My code includes an AJAX function that sends a GET request to an API and receives data in the format shown below: { "firstname": "John", "lastname": "Doe", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

javascripthtmlfor-loophtml-table

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

javascriptreactjstypescriptfirebasefirebase-authentication

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating

As part of my Angular project, I am currently focusing on writing unit test cases using the Jasmine Framework and Karma. To ensure thorough testing coverage, I am utilizing Coverage-html (Istanbul). When it comes to coverage, there are several important t ...

javascriptangularjsjasminekarma-jasmineistanbul

Enhancing Website Performance with Vue.js 2.0 Lazy Loading

I'm attempting to implement Lazy Loading for my components in Vue.js 2.0 (within a Laravel 5.3 project). As per the guidelines, I should proceed like this: Vue.use(VueRouter); const Forum = resolve => require(['./Components/Forum/Forum.vue& ...

javascriptlaravellazy-loadingvue.jschunks

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

javascripthtmlcss

The parameters sent through Ajax are coming back as undefined

I'm encountering an issue where all the data passed in my Ajax call to a PHP function is showing up as "UNDEFINED" on the server side. The JQuery debugged fine, so it seems like the problem lies within the PHP side of things. $('.js-checkout-shi ...

phpjqueryajaxopencart

Is there a way to obtain HTML code within a contentEditable DIV?

When working in a contentEditable-DIV, my goal is to extract the HTML code from the starting position (0) to the end position where the user has clicked. <div id="MyEditableId" contentEditable="true"> 1. Some text 123. <span style="background-c ...

javascriptjqueryhtmlcss

The object filtering process is experiencing issues due to the presence of a null value in the column

I am trying to extract object data based on a specific value from an array. While the code snippet below works well when there are no null values, it fails to work properly when encountering null values in the column. For reference, you can check out this ...

javascriptangular

Guidelines for linking a promise function to a JSX component

How can we use React components to handle the result of a promise function and map it to JSX components? <Promise on={myFunc}> <Pending> ... </Pending> <Resolved> {(data: any) => ( ... )} ...

javascriptreactjs