Dynamic SVG positioning

Looking for a way to make this svg shape relative to its containing div?

Fiddle: http://jsfiddle.net/8421w8hc/20/

<div>

    <svg  viewBox="0 0 1000 2112" style="" xmlns="http://www.w3.org/2000/svg" version="1.1">

        <path id="ma" stroke-linejoin="round" stroke-width="3" d="M276.53125,21.0625C270.2435,21.1337,264.6632,29.710064,257.625,38.15625C254.2095,42.255008000000004,246.70916,40.314622,242.1875,46.34375C236.65521,53.720438,230.99785,62.346888,226.46875,69.59375C215.85686,86.573459,230.16928,97.782258,212.125,111.1875C207.10965,114.77674999999999,201.08841999999999,115.97395,197.6875,119.375C192.96555,124.09715,192.80861,146.86201,183.5,153.84375C179.2572,157.02598,177.89186,161.88925,174.34375,165.4375C171.68483,168.09653,165.60417999999999,166.5658,163.375,170.28125C159.25578,177.1469,152.38471,200.19938,145.5625,203.6875C135.98604,208.58383,130.12789,210.84282,127.15625,215.15625C124.21798,219.42123,128.21307,221.02478,120.40625,232.65625C116.20943,238.90915,125.44735,245.58204,127.5,249.6875C130.03318,254.75407,121.95861,264.95404,121.4375,266.34375C116.03641999999999,273.13373,110.82711,279.75904,106.0625,286.90625C104.9172,288.62427,104.41387,291.14857,103,292.5625C101.23068,294.33189,100.92556,298.02625,99.375,300.09375C98.25112,301.59231,98.340978,305.27722,97.5625,307.09375C96.151137,310.38706,99.710576,316.2122,100.59375,319.15625C101.74974,323.00968,102.93777,328.35011,106.25,331C108.44205,332.75371,110.92774,335.24016,113,337.3125C115.21027,339.52286,119.50015,339.84377,122.125,341.34375C123.7939,342.29745,125.21469,344.74589,126.65625,346.1875C131.13587,350.66731,130.14474,359.6758,134.6875,364.21875C140.22073,369.7522,147.72669,372.17836,151.0625,379.40625C151.6216,380.61769,152.22093,382.11301,152.78125,383.75C153.30442,384.12705,153.81841,384.52134,154.34375,384.96875C159.49011,382.16219,192.47898,377.45858,194.125,375.8125C201.6757,368.26149,216.63142,331.12495,220.25,319.0625C223.11402,309.51541,224.60791,292.67363,231.75,285.53125C238.94927,278.33169,243.64201,268.57702,250.59375,261.625C255.44103,256.77752,268.37051,251.81277,270.40625,247.0625C272.02917,243.27554,261.87965,212.73681,268.09375,194.09375C273.12962,178.98553,292.55847,176.39929,295.6875,165.96875C298.4306,156.82473,307.59017,148.35643,312.5,138.78125C311.95901,138.28635,311.42663,137.7704,310.90625,137.25C306.57248,132.91606,301.96542,134.44373,297.34375,128.28125C294.72734,124.79256,299.28371,117.00322,296.53125,113.5625C293.76217,110.10102,290.4536,104.92346,289.03125,100.65625C286.52797,93.146115,292.375,82.479489,292.375,74.34375C292.375,72.274832,306.32062,71.292295,302.375,66.03125C298.36618,60.685944,297.79382,50.044012,293.28125,45.53125C290.88005,43.129956,297.01201,34.334683,294.71875,32.5C293.39881,31.444011,290.24045,33.879986,289.09375,31.96875C284.34165,24.048267,280.3039,21.019778000000002,276.53125,21.0625Z" stroke="#ffffff" fill="#e9eaee" style="cursor: default; stroke-linejoin: round;"></path>
    </svg>
</div>
javascriptcssxmlsvg

Answer №1

If you want all the map shapes on the left to appear in the same place, one way to achieve this is by obtaining the bounding box of the path and adjusting it according to the x and y position.

$("path").hover(function() {
    var  bbox = this.getBBox();
    var d = $(this).attr("d");
    $("#city_map").html('<svg ... snip ...
      <path...  transform="translate('+(-bbox.x)+','+(-bbox.y)+')"></path></svg>');
});

Check out the demo here

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

Guide for using a CSS variable in a dynamic CSS class within a dynamic component

I'm working with library components and running into an issue with CSS when importing the same component multiple times within a parent component with different styles. import "../myCss.css" const CircleComponent = ({size , color}) => { ...

cssreactjsnext.jsmodulestyles

The Angular filter does not seem to work as expected when combined with the ng-if

There seems to be a problem with filtering an ng-repeat using a search box. <li ng-if="searchTab"><input type="text" class="form-control" placeholder="Search" ng-model="search" > </li> and then in the ng-repeat <div dir-paginate= ...

javascriptangularjs

Force the page to refresh if the user navigates back using the browser's back button

Similar Question: Cross-browser onload event and the Back button I am looking for a way to automatically refresh a view or page when a user navigates back to it using the browser's back button. Any suggestions? ...

javascripthtml

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

javascriptreactjsangulartypescriptreact-native

Steps to update the first set of x documents in MongoDB using Mongoose

Is there an efficient way to update the first five documents in mongoose? While I am familiar with updating multiple documents based on a condition, I specifically want to target the first five documents for updating in mongoose. I understand that I can a ...

javascriptnode.jsmongodbexpressmongoose

Ways to create spacing between vertically stacked columns in Bootstrap

I have created a website using Bootstrap and PHP to display data from 18 categories in columns. The code for listing the categories in a single row is shown below: <div class="row"> <?php foreach($categories as $val){?> <div class="col ...

htmlcssbootstrap-4rowspacing

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...

htmlcsshtml-email

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

What is the Best Way to Implement a Three-Column Layout on a Website with Bootstrap?

https://i.sstatic.net/raF0B.jpg ...

cssbootstrap-4frontend

React - Highcharts Full Screen dark overlay

I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality. The challenge I am facing is setting a fixed height for my charts while also enabling the option to view ea ...

javascriptcssreactjshighchartsreact-highcharts

Is it possible to incorporate HTML and CSS into a npm package?

I've been searching extensively for an answer to this question, but haven't found a clear answer. I recently began using the node package manager and I'm wondering if it's possible to publish a package that includes HTML and CSS, or if ...

javascriptnode.jsnpm

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers). However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying vario ...

javascriptangulartypescript

Vue application encountering issues with the functionality of the split method in Javascript

Hey there! I am just starting out with JS and Vue. Currently, I have a Vue application that pulls date information from an open API. The tricky part is that the API response includes both the date and time in one string (for example: 2019-10-15T09:17:11.80 ...

javascriptvue.js

AngularJS - let's make pagination more interactive by adding an active class to the current page

Check out this fiddle I created: http://jsfiddle.net/tbuchanan/eqtxLkbg/4/ Everything is working as intended, but I'm looking to add an active class to the current page when navigating through the pages: <ul class="pagination-controle pagination" ...

javascriptjqueryangularjs

Arrange the HTML DOM elements in the order of their appearance in a list

Is it possible to rearrange the order of <div> and its elements based on database information? For example, consider the following HTML structure: <div id="container"> <div id="A"> Form elements for A</div> <div id="B"& ...

javascriptjqueryhtmlangularjs

Is the JSON data missing from the POST request?

I'm having trouble inserting data into the database using a POST request. Here is how I'm making the request: 127.0.0.1:3000/api/users?fname=asd&lname=edc&<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7870 ...

javascriptjsonnode.jsmongodbserve

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

javascriptangularjsnode.jsstrongloop

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

javascripthtmlnode.jsreactjsjson