如何使用<a>标签触发SVG地图区域点击以唤起Bootstrap4模态框

Let's walk through the issues in your current code and get that modal working properly when clicking your SVG regions.

What's Causing the Problem? #

1. Invalid HTML Structure: Wrapping an SVG <g> element inside an <a> tag isn't valid HTML (inline elements like <a> shouldn't contain block-level/SVG container elements). This can break event propagation and default behaviors.
2. Mismatched JS Selector: Your jQuery code targets a[href$="#exampleModal"], but your <a> tag doesn't have an href attribute at all. The selector can't find the element, so the modal never triggers.
3. Event Blocking: The onclick="return false" is preventing the default modal trigger behavior from firing, even if the data attributes were set up correctly.

Solution 1: Directly Bind Click to SVG Regions (Recommended) #

This approach skips the problematic <a> tag entirely and binds the click event directly to your SVG region elements. It also lets you easily pull the region name from the data-bolgeadi attribute to customize the modal content.

Updated SVG Code:

<g id="ege" class="region" data-bolgeadi="Ege Bölgesi"> 
  <path> . . </path>
</g>

Updated JS Code:

// Wait for DOM to load before binding events
$(document).ready(function() {
  // Bind click event to all SVG regions with the .region class
  $('.region').on('click', function() {
    // Get the region name from the data attribute
    const regionName = $(this).data('bolgeadi');
    
    // Update the modal title with the region name (optional but useful)
    $('#exampleModalLabel').text(regionName);
    
    // Trigger the modal to show
    $('#exampleModal').modal('show');
  });
});

Solution 2: Fix the <a> Tag Approach (If You Prefer Using It) #

If you want to keep using an <a> tag, adjust the structure to place the <a> inside the SVG <g> (instead of wrapping it) and fix the attributes/selector:

Fixed SVG + <a> Code:

<g id="ege" class="region" data-bolgeadi="Ege Bölgesi"> 
  <a href="#exampleModal" data-mdb-toggle="modal">
    <path> . . </path>
  </a>
</g>

Corrected JS Code (If You Need Custom Logic):

$(document).ready(function() {
  // Now the selector matches the href attribute in the <a> tag
  $('a[href="#exampleModal"]').on('click', function(e) {
    e.preventDefault(); // Prevent default anchor behavior if needed
    const regionName = $(this).closest('.region').data('bolgeadi');
    $('#exampleModalLabel').text(regionName);
    $('#exampleModal').modal('show');
  });
});

Important Notes: #

• Remove onclick="return false": This was blocking the modal trigger—you don't need it if you're using the data attributes or proper event binding.
• Check Dependencies: Make sure you've loaded jQuery before Bootstrap/MDBootstrap JS files in your HTML. The order matters for proper functionality.
• Test Modal Basics: First confirm your modal works by adding a simple button with data-mdb-toggle="modal" and data-mdb-target="#exampleModal"—this ensures the modal itself is set up correctly before troubleshooting the SVG click.

内容的提问来源于stack exchange，提问作者MarcAntony C-132