What is the best way to add borders to the cities on interactive SVG maps?

I'm currently developing Interactive SVG Maps showcasing Turkey. The map consists of 81 cities, each represented by <g> elements, and their respective districts, created as child elements within the city elements. It's worth noting that the borders of a city align with the borders of its districts. Below is a snippet of the code:

<g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="--87">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
                    </g>
                </g>

The requirement is to emphasize the outer borders of the cities in thick black lines, rather than focusing on the district borders themselves.

Appreciate your help!

javascriptjqueryhtmlcsssvg

Answer №1

I'm not entirely sure about your question as I am not familiar with the geography of your region.

There are a couple of errors in your SVG code: you have repeated the same id multiple times, so I have converted them into classes. Additionally, your SVG file is quite lengthy, so I have moved some styles to CSS.

If you are looking to outline the 4 polygons, I have applied an SVG filter to draw a red line: 

<g id="Hakkari" filter="url(#outline-red)" . . . .

I hope this addresses your query.

svg {
  border: 1px solid;
}

.Shape {
  stroke: #ffffff;
  fill: #9fb4b7;
}
text {
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  fill: #000000;
  font-weight: bold;
}

#Hakkari{filter:url(#outline-red); }
/*#Hakkari:hover{filter:url(#outline-red); }*/
<svg viewBox = "4570 1300 500 350">
  <defs>
    <filter id="outline-red">
    <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="3"/>
    <feFlood flood-color="red" result="red" />
    <feComposite in ="red" in2="expanded" operator="in" />
    <feComposite in="SourceGraphic"/>
    </filter>
    
  </defs>
  <g id="Hakkari"  transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        <g id="MER" transform="translate(85.000000, 98.000000)" >
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
                    </g>
    
    
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon class="Shape"  points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        <g id="YÜK" transform="translate(78.000000, 86.000000)" >
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon class="Shape"  points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        <g id="ŞEM" transform="translate(81.000000, 62.000000)" >
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon class="Shape"  points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        <g id="ÇUK" transform="translate(104.000000, 50.000000)" >
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
                    </g>
  </g>
  
</svg>

UPDATE:

Here is another method for adding borders to a group of elements: I've used one group as a background with a border. Then, I've utilized the same group as intended.

svg {
  border: 1px solid;
}

#A {
  fill: red;
  stroke: red;
  stroke-width: 10px;
}

#B {
  stroke: #ffffff;
  fill: #9fb4b7;
}
text {
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  fill: #000000;
  font-weight: bold;
  stroke: none;
}
<svg viewBox="4570 1300 500 350" width="500" height="350">
  <defs>
    <g id="Hakkari">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        
                    </g>
    
    
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon class="Shape"  points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon class="Shape"  points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon class="Shape"  points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        
                    </g>
  </g>  
  </defs>
  
<g transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87"> 
  <use id="A" xlink:href="#Hakkari" />
  <use id="B" xlink:href="#Hakkari"  />
  
  <g id="Hakkari_text">
    <g id="MER" transform="translate(85.000000, 98.000000)" >
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
    <g id="YÜK" transform="translate(243.000000, 86.000000)" >
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
    <g id="ŞEM" transform="translate(325.000000, 169.000000)" >
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
    <g id="ÇUK" transform="translate(104.000000, 193.000000)">
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
  </g>

  </g>
  
</svg>

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

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

javascriptphphtmlmysqlajax

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

javascriptangular

Why is it not possible to declare an interface or type within a TypeScript class?

I am struggling to define interface | type within a TypeScript class. Here is the code snippet: class MyClass { interface IClass { name: string, id: string } } However, I keep encountering this error: Unexpected token. A constructo ...

javascripttypescriptoopoverridingtsc

What is the best way to extract function bodies from a string with JavaScript?

I am currently searching for a solution to extract the body of a function declaration by its name from a JavaScript code string within a Node.js environment. Let's assume we have a file named spaghetti.js that can be read into a string. const allJs = ...

javascriptnode.jsregexstring

Orders in WooCommerce are being mysteriously created with no information provided and stuck in a pending payment state

Are you experiencing the issue of blank orders being generated in WooCommerce with no details and a pending payment status? I am utilizing the WooCommerce plugin along with the Elavon payment gateway, and although everything seems to be set up correctly, t ...

csswordpresswoocommercepluginsstatus

Retrieve the value of a JSON array containing only a single object using jQuery

In my project, I have a jQuery file and a PHP file. If the PHP file successfully completes the process, it returns the value 2 using `echo json_encode(2)`. I am able to catch this value in the jQuery file and display a string on an HTML div without any iss ...

javascriptphpjqueryarraysjson

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

javascripthtmlpython-3.xchar

How to trigger a function when clicking on a TableRow in React using MaterialUI

Can someone help me understand how to add an onClick listener to my TableRow in React? I noticed that simply giving an onClick prop like this seemed to work: <TableRow onClick = {()=> console.log("clicked")}> <TableCell> Content </Ta ...

javascriptreactjsmaterial-ui

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

External style sheet link is not operational

Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...

phphtmlcss

Error: Unable to access the applicant's ID as it is undefined

I'm currently facing an issue with passing parameters from server.js to humanresources.js in a login request. Although the params are successfully printed out in server.js, they appear as "undefined" once passed on to the function in human resources.j ...

javascriptnode.jsreactjs

Tips for sending props to Material UI components

Hey there! I'm currently working on a progressbar component that utilizes animations to animate the progress. I've styled the component using Material UI classes and integrated it into another component where I pass props to customize the progres ...

javascriptreactjsmaterial-ui

What is the JavaScript method for updating an HTML5 datalist to show new options?

When populating options dynamically into an HTML5 datalist, I'm facing an issue where the browser tries to display the datalist before all the options have loaded. As a result, the list either does not show up completely or only partially shows up. Is ...

javascriptjqueryajaxhtmlhtml-datalist

Utilizing inline javascript to dynamically update the selected option of a radio button

A form on my website includes two radio buttons: one labeled 'trigger_unit' and the other labeled 'normal_unit'. In addition, there is a select drop-down menu with four values and a default NULL option. <select rel="dropdown" name=" ...

javascripthtmldynamic

Adjust padding for smaller devices in React using Material UI

In my grid layout, I have columns set to 3,6,3 and a spacing of 3 between them. On larger screens, the spacing between grids looks fine. However, as the screen size decreases, the spacing remains the same which is not visually appealing. What I am aiming ...

cssreactjsmaterial-ui

Hide the cursor when the text box is in focus

Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...

jqueryhtml

Combining Server-Side HTML with React Components and Functions: A Guide

Utilizing Vue makes it simple for me to incorporate a Vue application as a container above the server-side rendering HTML like so: <body> <div id="appMain"> <!-- This serves as the primary element for Vue --> <!-- ...

javascriptreactjsvue.js

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

htmlcssz-index