The issue of the background image not properly zooming and panning alongside the SVG

Having a bit of trouble with my SVG and background image. I've managed to set up zooming and panning for the SVG, but the background image is not cooperating. When I move horizontally, the background image moves along with the SVG, but it doesn't follow when I move vertically.

I'm trying to achieve this without using any libraries like svg-pan-zoom. The final setup will involve touch screen functionality with onclick events replaced by touchstart events linked to a different SVG. But for now, I'm testing it out with simple buttons.

It's important for me to add the background image using CSS instead of including it inline with the SVG to avoid bloating its file size.

Additionally, I need to maintain the fixed size of the div to support panning effectively.

Is there a way to scale both the SVG and background image uniformly?

You can check out my JSFiddle here. (Note: The script may not work in JSFiddle, but should run fine on a server).

javascriptcsssvgzoomingpan

Answer №1

My preference is to include the background image using CSS rather than inline with the SVG, as this can impact the size of the SVG file.

This statement is not entirely accurate. By linking the background image through an <image> element in your SVG, it will not significantly increase the overall size of your SVG compared to using CSS.

In addition, by placing the background image within the SVG file, it will seamlessly move and scale along with the rest of the SVG without requiring any additional adjustments.

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

Why is the $scope variable value not being updated in Angular JS controller?

My controller code snippet is shown below. I am trying to access the value of $scope.FCGId. How can I access this variable? angular.module('hotelApp.controllers') .controller('menuCtrl', ['$scope','menu' ...

javascriptangularjs

Is there a way to maintain the same variable name post JavaScript minification done by Angular?

I am looking for a way to preserve one specific variable name after my code has been minified. It is important that this variable remains intact even after TypeScript has been compiled into minified JavaScript. Here are some details: When I run the conso ...

javascriptangularminifyhotjar

The Vue.js application appears to be functioning properly with no error messages, however

Currently, I am in the process of learning Vue. Recently, I came across a helpful tutorial that I've been trying to implement using the standard vue-cli webpack template by splitting it into single file components. Despite not encountering any errors ...

javascriptvue.js

difficulty in sending data response to react frontend

After following a tutorial to create a basic react and express webapp that takes user input from HTML, sends it to chat GPT, and displays the output on the page, I've encountered an issue. While the application successfully fetches user input and logs ...

javascriptnode.jsreactjsjsonforms

Compass - substitute a single value for an alternate attribute

Can I utilize a value from one class to customize another? Consider the following class: .sourceClass { color: red; } And now, let's say we have this class: .destinationClass { border-color: ###needs to match the color in .sourceClass => re ...

csssasscompass

Exploring the dynamic duo of HTML and JQuery within the Webstorm IDE

I'm facing a simple issue with my webstorm project. It consists of an HTML file, CSS file, and JS file. In my project, I tried creating a circle using a "div" element and attempted to make it fade out upon clicking with JavaScript. However, the funct ...

javascriptjqueryhtml

PNG file is not displayed on React TSX page despite absence of any errors

I've implemented this initial design template from GitHub (https://github.com/vikpe/react-webpack-typescript-starter). Additionally, I'm utilizing react-bootstrap and have a container that includes a backgroundImage. const heroImage = require(&q ...

javascriptreactjstypescriptreact-bootstrap

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

AngularJS does not automatically generate input elements for editing purposes

Trying to make real-time edits to an element by triggering a function on ng-click using AngularJS. My HTML code: <div class="row question">{{questions.1.name}} <a href="" class="glyphicon glyphicon-pencil" ng-click="editQuestion(questions.1.name ...

javascriptangularjs

function for app.get callback in express.js

Hey there, I'm a bit puzzled by the syntax of the get route function because there seem to be two versions. Here's an example of some code: First one: app.get('/users', function(req,res){ ... }); Second one: app.get('u ...

javascriptexpressget

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

javascriptjquerytwitter-bootstrapbootstrap-4

Transforming the current time into a specified time frame using jquery, mysql, and/or php

I am currently developing an RPG chat using outdated PHP-MySQL and JavaScript (before the existence of jQuery), with a vampire-themed storyline (definitely not a Twilight-esque one, I promise :P). My goal is to implement a visible clock in the game that d ...

javascriptjquerytimeclock

Present XML data on an HTML page to generate interactive form features

I have an application that features a checkbox tree. I would like to automatically pre-select those checkboxes if the user had previously checked them. To achieve this, I receive XML data from my backend Perl script which contains information on which che ...

javascriptjqueryhtmlxml

Choosing the perfect item with the help of a material's GridList

I've developed a react-mobx application using Material-UI, and the code structure is similar to this: render() { // defining some constants return ( <div> <img src={selectedPhoto} alt={'image title'} /> < ...

javascriptreactjsmaterial-uimobx

The alignment of the Nivo Slider is off-center

Visit to see that the Nivo Slider is not properly centered on the background. I am unsure why this is happening. (Please disregard the 2nd and 3rd pictures as they are not the correct size, but focus on the 1st one). ...

jqueryhtmlcsspluginsnivo-slider

Unable to utilize jQuery library in AngularJS partial HTML files, despite being loaded in the index.html file

I have been working with a web template that utilizes jQuery image gallery and other elements. Now, I am looking to convert this template into an AngularJS structure. To do so, I have created partial HTML pages like slider.html or contact.html along with t ...

javascriptjqueryangularjs

Receiving no feedback from a public API while coding in React.js

I am currently delving into React.js and have been experimenting with a basic form. The issue I am facing is related to sending form data using ajax and not receiving a response. Upon running the code, the console displays an error message stating readysta ...

javascriptajaxreactjs

How can we implement a select-all and deselect-all feature in Vue Element UI for a multi-select with filtering capability?

As a newcomer to VueJs, I am exploring how to create a component that enables multiple selection with a search option and the ability to select all or deselect all options. To achieve this functionality, I am utilizing the vue-element-ui library. You can ...

javascriptvue.jselement-ui

The functionality of images and links is compromised when they are assigned as values to properties within a JSON object

My images and links are not working, even after declaring them globally. When I write the src directly into src, everything seems fine but the alert pops up with the same URL and img src. Can anyone help? var combo0; var combo1; var combo2; var combo3; ...

javascripthtmljsonobjecthyperlink

Nested click events in a loop using Javascript

My issue involves nested click event listeners in my JavaScript code. Whenever I trigger the event multiple times, it seems to loop and send a request twice as many times as expected. Can someone help me locate the mistake in my code? I'm still new to ...

javascriptjqueryajax