Tips for displaying <p> element upon hovering over a specific area of an SVG image

Question

Tips for displaying <p> element upon hovering over a specific area of an SVG image

I created a map and converted it to SVG. I want to display the name of each neighborhood when a user hovers the mouse over it.

I'm not sure how to achieve this or how to isolate the specific area of a neighborhood to make changes.

Here's a screenshot of that section of the website:

.

Users have been asking for more information for a complete answer. Here's the HTML code I used:

<div class="col-lg-6 col-md-6 col-sm-12 content-area">
    <object style="width: 500px; margin-top: 30px; margin-bottom: 30px;" type="image/svg+xml" data="<?php bloginfo('template_directory');?>/img/mapa-goiania-traco.svg"></object>
</div>

And here's the SVG code:

My main challenge right now is figuring out how to separate the specific areas of the neighborhoods within the SVG file in order to apply CSS changes. When I view the SVG file, it all looks like a jumble of numbers without any distinction between different neighborhood areas. I need to be able to select them individually to work with CSS effectively.

javascript html css svg

Answer 1

Answer №1

Check out this simple demo to experiment with. Rene suggested that applying classes (like paris in my example) to the SVG elements would be more precise. However, the way you structure your SVG code will determine if this is feasible. If not, consider using relative positioning for the SVG itself and position each section absolutely to have better control over the layout.

.container {
    display:flex;align-items:center;justify-content:center;
}

.map {
  background:lightgray;
  width:500px;height:500px;margin-top:250px;
}

.square {
  width:250px;height:250px;cursor:pointer;
}

.paris {
  background:blue;
}

.paris span {
  width:50%;margin-left:25%;
margin-top:25%;visibility:hidden;color:#FFF;}

.paris:hover span {
  visibility:visible;
}

<div class="container">
  <div class="map">
    <div class="square paris">
      <span>Paris (France)</span>
    </div>
    <div class="square montreal"></div>
    <div class="square boston"></div>
    <div class="square istanbul"></div>
  </div>
 </div>

Answer 2

Check out this simple demo to experiment with. Rene suggested that applying classes (like paris in my example) to the SVG elements would be more precise. However, the way you structure your SVG code will determine if this is feasible. If not, consider using relative positioning for the SVG itself and position each section absolutely to have better control over the layout.

.container {
    display:flex;align-items:center;justify-content:center;
}

.map {
  background:lightgray;
  width:500px;height:500px;margin-top:250px;
}

.square {
  width:250px;height:250px;cursor:pointer;
}

.paris {
  background:blue;
}

.paris span {
  width:50%;margin-left:25%;
margin-top:25%;visibility:hidden;color:#FFF;}

.paris:hover span {
  visibility:visible;
}

<div class="container">
  <div class="map">
    <div class="square paris">
      <span>Paris (France)</span>
    </div>
    <div class="square montreal"></div>
    <div class="square boston"></div>
    <div class="square istanbul"></div>
  </div>
 </div>

Answer 3

Answer №2

Adding to my earlier comment, I decided to use File:Brazil State RiodeJaneiro.svg from WikiMedia (original owner holds all rights!) and made some tweaks to simplify it (removed most paths) for the snippet below.

I included

<text class="capital">

below the

<path class="capital">

of the State of Rio de Janeiro and set the text to be hidden by default. On :hover over the State of Rio de Janeiro (in dark red), I reveal the text using the adjacent selector (+) as mentioned in w3schools: CSS Selector Reference.

All the CSS code resides within the SVG file, ensuring that it not only functions when the SVG is embedded in your HTML, but also when the SVG file is opened in a browser.

You can find and run the SVG on Codepen (as the file is too large for SO), and below is the relevant code as I mentioned previously.

In a different answer on Stackoverflow, I implemented a similar approach to display text (responsively) when hovering over the top floor of an image of a building: SO62099505

CSS within SVG

<style>
    .capital {
        visibility: hidden;   /* text hidden by default */
        pointer-events: none; /* ignores cursor over text to prevent hover 'jitter' */

        /* Added for demo */
        font-weight: bold;
        font-size: 2800px;
        letter-spacing: 100px;

        fill: White;
        fill-opacity: 1;
        stroke: black;
        stroke-width: 75;
    }
    .estado { 
        fill: FireBrick; 
        cursor: pointer; 
    }

    /* Reveals text element adjacent to (below) path element when hovered over */
    .estado:hover + .capital { 
        visibility: visible; 
    } 
</style>

SVG Code


    <g id="Estados">
        <!-- State of Rio de Janeiro -->
        <path class="estado" d="M143583 140702l32 -32 0 -32 0 -32 65 -32 ... "/>
        <text class="capital" y="137500" x="146500">Rio de Janeiro</text>
    </g>

Answer 4

Adding to my earlier comment, I decided to use File:Brazil State RiodeJaneiro.svg from WikiMedia (original owner holds all rights!) and made some tweaks to simplify it (removed most paths) for the snippet below.

I included

<text class="capital">

below the

<path class="capital">

of the State of Rio de Janeiro and set the text to be hidden by default. On :hover over the State of Rio de Janeiro (in dark red), I reveal the text using the adjacent selector (+) as mentioned in w3schools: CSS Selector Reference.

All the CSS code resides within the SVG file, ensuring that it not only functions when the SVG is embedded in your HTML, but also when the SVG file is opened in a browser.

You can find and run the SVG on Codepen (as the file is too large for SO), and below is the relevant code as I mentioned previously.

In a different answer on Stackoverflow, I implemented a similar approach to display text (responsively) when hovering over the top floor of an image of a building: SO62099505

CSS within SVG

<style>
    .capital {
        visibility: hidden;   /* text hidden by default */
        pointer-events: none; /* ignores cursor over text to prevent hover 'jitter' */

        /* Added for demo */
        font-weight: bold;
        font-size: 2800px;
        letter-spacing: 100px;

        fill: White;
        fill-opacity: 1;
        stroke: black;
        stroke-width: 75;
    }
    .estado { 
        fill: FireBrick; 
        cursor: pointer; 
    }

    /* Reveals text element adjacent to (below) path element when hovered over */
    .estado:hover + .capital { 
        visibility: visible; 
    } 
</style>

SVG Code


    <g id="Estados">
        <!-- State of Rio de Janeiro -->
        <path class="estado" d="M143583 140702l32 -32 0 -32 0 -32 65 -32 ... "/>
        <text class="capital" y="137500" x="146500">Rio de Janeiro</text>
    </g>

Answer 5

Answer №3

Appreciate the assistance from everyone!

Here's how I tackled the issue: I created the map using Inkscape and organized the neighborhoods into different layers. This allowed me to save the map as an SVG file with all the paths separated, making it simple to customize and modify as needed.

For those facing similar challenges, I highly recommend using Inkscape for editing and customizing SVG files. It provides nearly complete code that is easy to work with and customize to your liking.

Answer 6

Appreciate the assistance from everyone!

Here's how I tackled the issue: I created the map using Inkscape and organized the neighborhoods into different layers. This allowed me to save the map as an SVG file with all the paths separated, making it simple to customize and modify as needed.

For those facing similar challenges, I highly recommend using Inkscape for editing and customizing SVG files. It provides nearly complete code that is easy to work with and customize to your liking.

Tips for displaying <p> element upon hovering over a specific area of an SVG image

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulty interpreting the json data retrieved from the specified url

Struggling to fetch data from the Strapi page is posing a challenge

What factors influence Redux in determining when to update the user interface?

Routing in Next.js to create custom URL slugs for usernames, like (site.com/username), is a

jQuery was denied permission to implement inline styling due to non-compliance with the specified Content Security Policy directive

How can I dynamically swap one div with another within the same div using Javascript?

Adjust the size using padding alone

Rails offers a unique hybrid approach that falls between Ember and traditional JavaScript responses

Utilizing webpack, gulp, and typescript to efficiently incorporate jQuery plugins

Currently, there is a requirement to include past build outcomes in the HTML test report within the playwright

Is it possible to insert IE conditionals within functions.php in WordPress?

What is the best way to transfer scope to a callback function in the context of node-mysql?

Unable to render ng-view due to it being enclosed within a comment block

Toggle a DIV's class using jQuery upon clicking a link, then hide the link and reveal the hidden information inside the DIV. This functionality can be applied to multiple

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Jest tests are failing because React is not defined

What is the method to reach a named parameter within a function?

Challenges encountered when attempting to send an array in res.json with the MERN stack

Store the label's value as a JSON object in JavaScript

transferring data to Amazon Web Services using Angular framework