Modify the SVG height using JavaScript and CSS

Question

Modify the SVG height using JavaScript and CSS

In my SVG file, I have paths for all the countries in the world. Each country is represented by its own individual path like this:

<path
      inkscape:connector-curvature="0"
      id="PH"
      data-name="Philippines"
      data-id="PH"
      d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 1.1,1.9 3.9,-3.6 2.7,0.3 1.5,-2.7 3.8,3 -1.5,3.1 1.9,4.6 6.8,3.7 1.4,-3 -2.1,-4.7 2.4,-3.2 2.5,6.4 1.5,-5.8 -0.6,-3.5 -0.8,-4.3 z m -14.5,-11.8 0,-6.1 -3.6,6.1 0.5,-4.2 -3,0.3 -0.3,4 -1.2,1.8 -1,1.7 3.8,4.4 1.6,-1.9 1.4,-4 1.8,-2.1 z m -30.1,6.1 2.6,-4.4 3.4,-3.5 -1.5,-5.2 -2.4,6.3 -2.9,4.4 -3.8,4 -2.4,4.4 7,-6 z m 17.4,-16...

<path
      inkscape:connector-curvature="0"
      id="PL"
      data-name="Poland"
      data-id="PL"
      d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 -5.7,2.1 -7.1,2.8 -3.1,1.7 1.4,3.1 -1.2,1.6 2,2.2 1.4,3.3 -0.1,2.1 2.3,3.9 2.4,1.9 3.7,0.6 -0.1,1.7 2.7,1.2 0.6,-1.5 3.4,0.6 0.7,2 3.6,0.3 2.6,3.1 0.3,0.4 1.9,-0.9 2.7,2.2 2.8,-1.3 2.4,0.6 3.4,-0.8 4.9,2.3 1.1,0.4 -1.6,-2.8 3.8,-5.1 2.3,-0.7 0.3,-1.8 -3.1,-5.3 -0.5,-2.7 -1.9,-2.9 2.7,-1.2 -0.3,-2.4 -1.7,-2.3 -0.6,-2.7 -1.4,-1.9 -2.5,-0.6 -8.7,0.1 -5.9,-0.7 z"
      style="fill:#f2f2f2;fill-rule:evenodd" />

To interact with each country using JavaScript, I added an anchor tag before each country:

<a href="#" onclick="SelectCountry('ph');" id='country_ph'> 
   <path
      inkscape:connector-curvature="0"
      id="PH"
      data-name="Philippines"
      data-id="PH"
      d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 1.1,1.9 3.9,-3.6 2.7,0.3 1.5,-2.7 3.8,3 -1.5,3.1 1.9,4.6 6.8,3.7 1.4,-3 -2.1,-4.7 2.4,-3.2 2.5,6.4 1.5,-5.8 -0.6,-3.5 -0.8,-4.3 z m -14.5,-11.8 0,-6.1 -3.6,6.1 0.5,-4.2 -3,0.3 -0.3,4 -1.2,1.8 -1,1.7 3.8,4.4 1.6,-1.9 1.4,-4 1.8,-2.1 z m -30.1,6.1 2.6,-4.4 3.4,-3.5 -1.5,-...

   </a>

Then, to handle the click event on a country:

var phCountry = document.getElementById("PH");

function SelectCountry(country)
{
    alert(country);
}

However, I tried to scale the clicked country by adding these lines:

phCountry.setAttribute("height", "100px");

phCountry.style.height = "100px";

I'm new to working with SVG and JavaScript, so I might be approaching this incorrectly. Can anyone help me figure out how to properly implement this? Thank you!

javascript css svg

Answer 1

Answer №1

<path> elements do not have a width or height attribute that can be changed directly. Instead, you need to apply a transform to scale the country paths when they are clicked on.

Adding <a> tags to your SVG is unnecessary. Simply attach a click handler to each path element.

Check out the example below for a better understanding:

// Find all <path> elements in the SVG and add a click event listener to each one
document.querySelectorAll("svg path").forEach(function(item) {
  item.addEventListener("click", countryClick);
});

function countryClick(e) {
  // e.target refers to the path that was clicked
  // The classList.toggle("enlarge") will toggle the "enlarge" class on and off with each click
  e.target.classList.toggle("enlarge");
}

.enlarge {
  /* Use the bounds of the path to calculate the transform origin */
  transform-box: fill-box;
  /* Set the origin for scaling at the center of the path bounds */
  transform-origin: 50% 50%;
  /* Scale up by a factor of 2 in both x and y directions */
  transform: scale(2, 2);
}

<svg viewBox="1000 200 800 400">
  <path inkscape:connector-curvature="0"
        id="PH"
        data-name="Philippines"
        data-id="PH"
        d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 ... />
  <path inkscape:connector-curvature="0"
        id="PL"
        data-name="Poland"
        data-id="PL"
        d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 ... />
</svg>

However, there is an additional step that needs to be considered. When you enlarge a country, it might get hidden behind another un-enlarged country due to the draw order of elements in an SVG. To address this, you should also reorder the enlarged country to the front by moving it to the end of the SVG.

In the next example, I've included the necessary code snippet:

// Look for all <path> elements in the SVG and add a click handler to each one
document.querySelectorAll("svg path").forEach(function(item) {
  item.addEventListener("click", countryClick);
});

function countryClick(e) {
  // e.target is the path we clicked on.
  // classList.toggle("enlarge") will cause the "enlarge" class to be added then removed on alternate clicks
  e.target.classList.toggle("enlarge");

  // If we are enlarging, move the path to the end of the SVG
  if (e.target.classList.contains("enlarge")) {
    var svg = e.target.ownerSVGElement;
    svg.appendChild(e.target); // Moves the path to the end of the SVG
  }
}

.enlarge {
  /* Use the bounds of the path to calculate the transform origin */
  transform-box: fill-box;
  /* Set the origin for scaling at the center of the path bounds */
  transform-origin: 50% 50%;
  /* Scale up by a factor of 2 in both x and y directions */
  transform: scale(2, 2);
}

<svg viewBox="1000 200 800 400">
  <path inkscape:connector-curvature="0"
        id="PH"
        data-name="Philippines"
        data-id="PH"
        d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 ... />
  <path inkscape:connector-curvature="0"
        id="PL"
        data-name="Poland"
        data-id="PL"
        d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 ... />
  <path d="M 1100,228 h 30 v 30 h -30 z" fill="#ccaa88"/>
</svg>

Answer 2

<path> elements do not have a width or height attribute that can be changed directly. Instead, you need to apply a transform to scale the country paths when they are clicked on.

Adding <a> tags to your SVG is unnecessary. Simply attach a click handler to each path element.

Check out the example below for a better understanding:

// Find all <path> elements in the SVG and add a click event listener to each one
document.querySelectorAll("svg path").forEach(function(item) {
  item.addEventListener("click", countryClick);
});

function countryClick(e) {
  // e.target refers to the path that was clicked
  // The classList.toggle("enlarge") will toggle the "enlarge" class on and off with each click
  e.target.classList.toggle("enlarge");
}

.enlarge {
  /* Use the bounds of the path to calculate the transform origin */
  transform-box: fill-box;
  /* Set the origin for scaling at the center of the path bounds */
  transform-origin: 50% 50%;
  /* Scale up by a factor of 2 in both x and y directions */
  transform: scale(2, 2);
}

<svg viewBox="1000 200 800 400">
  <path inkscape:connector-curvature="0"
        id="PH"
        data-name="Philippines"
        data-id="PH"
        d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 ... />
  <path inkscape:connector-curvature="0"
        id="PL"
        data-name="Poland"
        data-id="PL"
        d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 ... />
</svg>

However, there is an additional step that needs to be considered. When you enlarge a country, it might get hidden behind another un-enlarged country due to the draw order of elements in an SVG. To address this, you should also reorder the enlarged country to the front by moving it to the end of the SVG.

In the next example, I've included the necessary code snippet:

// Look for all <path> elements in the SVG and add a click handler to each one
document.querySelectorAll("svg path").forEach(function(item) {
  item.addEventListener("click", countryClick);
});

function countryClick(e) {
  // e.target is the path we clicked on.
  // classList.toggle("enlarge") will cause the "enlarge" class to be added then removed on alternate clicks
  e.target.classList.toggle("enlarge");

  // If we are enlarging, move the path to the end of the SVG
  if (e.target.classList.contains("enlarge")) {
    var svg = e.target.ownerSVGElement;
    svg.appendChild(e.target); // Moves the path to the end of the SVG
  }
}

.enlarge {
  /* Use the bounds of the path to calculate the transform origin */
  transform-box: fill-box;
  /* Set the origin for scaling at the center of the path bounds */
  transform-origin: 50% 50%;
  /* Scale up by a factor of 2 in both x and y directions */
  transform: scale(2, 2);
}

<svg viewBox="1000 200 800 400">
  <path inkscape:connector-curvature="0"
        id="PH"
        data-name="Philippines"
        data-id="PH"
        d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 ... />
  <path inkscape:connector-curvature="0"
        id="PL"
        data-name="Poland"
        data-id="PL"
        d="m 1069.4,228.3 -4.6,-0.1 -0.5,-1.4 -4.8,-1.1 ... />
  <path d="M 1100,228 h 30 v 30 h -30 z" fill="#ccaa88"/>
</svg>

Modify the SVG height using JavaScript and CSS

Answer №1

Similar questions

Complete Navigation Bar Expands Alongside Drop-down Menu

Adjusting image size as you scroll

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

Refresh the DOM window to load the updated PHP element

react-webcam npm package for optimizing video size

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

Invoke a method within an *ngIf statement in Angular 5

JavaScript encountered an abrupt cessation of input, catching us off guard

javascript mysql and php clash when it comes to loading

Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Dynamic content in CSS horizontal alignment

Switching between VR/StereoEffect modes in Three.js

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Error: Trying to access the 'title' property of an undefined variable in Vue.js

What are some ways to render a React component when its ID is only determined after making an AJAX call?

Properly setting up a personalized input component in Angular 6

Recreating a CSS3 animation for Internet Explorer 9

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

Issue with fading hover effect on links is not functioning

How can we detect line breaks within a selection using JavaScript?