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

Can you please guide me on how to convert pug (jade) to html using npm scripts?

Struggling to construct my package.json file, I find myself facing a challenge when it comes to writing scripts. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-css":"node-sass --output-style compressed -o bu ...

javascriptnode.jsnpmpug

Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

My response to a question about closures on SO included the following code sample: function Constructor() { var privateProperty = 'private'; var privateMethod = function(){ alert('called from public method'); }; ...

javascriptclosures

Execute and showcase code without redundancies

I have been exploring a way to store JavaScript code within an object and execute specific parts of it upon the user clicking a button. Here's what I've come up with so far: var exampleCode = { test: "$('body').css('background ...

javascriptjquery

Boost Google Pagespeed score by reducing 'Total Blocking Time' in NextJs

I've recently started using NextJS and I'm looking to improve my Google Pagespeed ranking. So far, I've made some good progress in optimizing different metrics. From the screenshot provided, it's clear that the only issue remaining i ...

javascriptreactjsnext.jspagespeed

Tips for efficiently removing a user as an administrator

Whenever a user logs in or registers, I save their session and cookie information and also add certain details to the database. Login/Register Module (login/register.php) $_SESSION['userid'] = $userid; $selector = base64_encode(random_bytes(9)) ...

phphtmlsession-cookies

How can I make my Background change on click using hexadecimal color codes?

I am struggling with changing the background color of an html document using a button click. While colors like "yellow, "blue", and "red" work perfectly, I encounter an issue when trying to use hexadecimal colors such as "#000000". The if-condition doesn ...

javascriptif-statement

How can the HTML source code be printed without showing it in a window or tab?

Here's the scenario: I'm making an ajax post request to a controller action, which returns complete html source code. I want to print this html source as if it were being displayed in a browser without opening a new tab or window. Is there a way ...

asp.net-mvc-3jqueryprinting

Issue with uploading files in Internet Explorer using Ajax not resolved

I've been encountering an issue while uploading images using Ajax and PHP. Surprisingly, everything runs smoothly on Firefox but fails to work on Internet Explorer (I.E). Take a look at my HTML code below: <!doctype html> <head> <titl ...

phphtmlajaxinternet-explorerfile-upload

Tips for accessing a variable located in a different directory

I'm facing some confusion regarding creating a global variable that can be accessed in another file. Currently, I have a chat and login folder setup. Within the login folder, there are three possible users to choose from. When a user clicks on one of ...

javascriptangularjsglobal-variables

Create an array using modern ES6 imports syntax

I am currently in the process of transitioning Node javascript code to typescript, necessitating a shift from using require() to import. Below is the initial javascript: const stuff = [ require("./elsewhere/part1"), require("./elsew ...

javascriptnode.jstypescript

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

htmlcssangularalignment

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

javascriptjquerycssimagehttp

Is there a way to design a catalog page for my website that doesn't include a shopping cart or detailed product pages?

I am looking to create a catalogue feature similar to Newegg's for my website, but with a simplified approach. I have never attempted something this advanced before and I am wondering if it is possible to achieve. My plan is to use PHP and JS for the ...

phpjavascriptmysqldatabase

What are the steps to manually activate input validation in Angular 2?

Having two inputs is the scenario here: The first input undergoes custom validator application The second input has a dynamic and editable value utilized in the custom validator If the custom validator is applied on the first input, then focus shifts to ...

javascriptangulartypescript

Error: The function or method save() has not been resolved

The function model.save() for mongoose is not being properly defined. models/genre.js 'use strict'; const mongoose = require('mongoose'); const Schema = mongoose.Schema; const GenreSchema = new Schema({ name: {type: String, requi ...

javascriptnode.jsexpressmongoose

Trigger a jQuery click event to open a new tab

On a public view of my site, there is a specific link that can only be accessed by authenticated users. When an anonymous user clicks on this link, they are prompted to log in through a popup modal. To keep track of the clicked link, I store its ID and inc ...

javascriptjqueryhtml

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, ren ...

javascriptjquerycssipad

Guide on retrieving the ID after a new entry is added using a trigger in Express.js and MySQL

Currently, I am utilizing express and workbench to set up a database for handling the creation, viewing, and updating of cars. When I make a POST request to add a new car, it generates a new entry with details such as manufacturer, model, and price. I hav ...

javascriptmysqlnode.jsexpress

What is the best way to access a scope variable within a directive in Angular?

I need to access a scope variable within a directive as a JavaScript variable. Here is the code snippet: app.controller("Home", ["$scope", function($scope) { ... $scope.nb_msg = data.length; ... }]); app.directive("myDiv", function() { // ...

javascriptangularjsscopeangularjs-directive

JavaScript or HTML can be used to store external embed PDF files in a cache

I have a PDF file from an external source embedded on this page. Although it displays correctly, I am concerned about the file being downloaded each time the page is visited. Would using an object tag instead help to cache the PDF and prevent repeated do ...

javascripthtmlobjectpdfembed