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

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...

javascriptjquery

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

javascriptangularrxjs

Extract data from nested divs using Excel VBA

Can anyone help me extract the start date from the code below? My current code does not seem to recognize the 'nested' div "daysTips." Any assistance would be highly appreciated. Thank you! HTML Screen Capture: https://i.sstatic.net/4fej8.jpg S ...

htmlexcelvbaweb-scraping

Is there a way to retrieve the dates from last month using jQuery?

Currently, I am unable to select past dates with the provided code. How can I adjust it to allow for selecting dates from previous months? let firstDay = new Date(); $('#date_filter_startmonthly').datepicker({ startDate: firstDay, endDate: ...

javascriptpythonhtmljqueryajax

Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout. It's a straightforward setup with a container div, left div for the menu, and ...

csshtml

Unable to establish a connection to 'X' as it is not recognized as a valid property

Trying to implement a Tinder-like swiping feature in my Angular project, but encountering an error stating that the property parentSubject is not recognized within my card component. Despite using the @Input() annotation for the property, it still fails to ...

htmlangulartypescript

Navigating through content using jQuery scroll bar

Could someone please assist me with scrolling the content on my website? For example, I have a link like this: <a href="#">content3</a> When a user clicks that link, I would like the content to scroll to div content3. I am looking for guidan ...

javascriptjqueryhtml

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

Having trouble getting Vuejs to work when appending an element to Fullcalender

Hi there, I am facing an issue where appending a custom button to a full calendar event is not working properly with Vue.js methods. It works fine with core JavaScript, but I really want it to work with Vue.js methods. Any ideas on how I can achieve this? ...

javascriptvue.jsvuejs2fullcalendarfullcalendar-4

CSS3 :target and display:none inconsistency problem in Internet Explorer and Firefox

Creating a one-page site with navigation tabs that toggle between hidden divs using :target CSS3 selector is my current project. To ensure the first div is visible upon page load, I implemented this line of code: document.location.href = "#div1"; The HTM ...

csstabstarget

Error in react-native while attempting to find the lowest common ancestor of `responderInst` and `targetInst` using `Event

After upgrading my react-native app to version 0.44, I encountered an issue where the app would start up without any problems in both the simulator and on a mobile device. However, when I tried pressing a component like a button or widget, a red error scre ...

javascriptandroidreact-native

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

I've successfully created a chatroom using PHP, JavaScript, AJAX, and SQL without the use of JQuery or any other tools. I maintain user persistence through session variables to keep users visible on the front page of my website (www.chatbae.com). How ...

javascriptphpajax

Challenges encountered when passing objects with Angular 2 promises

I am encountering a problem when using a promise to retrieve a Degree object in Angular 2. The initial return statement (not commented out) in degree.service functions correctly when paired with the uncommented implementation of getDegree() in build.compon ...

javascripttypescriptangularangular-promise

What is the best method for creating a vertical line separator with a hover effect in CSS?

Facing an issue with creating a vertical line separator in the navigation menu. While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to t ...

csslineseparator

How can we utilize dynatree.js lazy loading to eliminate null child nodes (i.e., every final node in a branch is null)?

I just started using dynatree and so far it's been great with lazy loading. However, I'm facing an issue where the last child is displaying as null for every branch. $("#tree").dynatree({ title: "Lazy loading sample", fx: { height: "togg ...

jqueryjsonnode.jsjquery-dynatree

Upon clicking the checkbox, only the ul tag will be displayed on the screen

It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag. .show-menu { display:block; } #menu{ float:left; } #social{ ...

htmlcsscheckbox

Issues observed when implementing replaceWith() to replace text tags with input field on a web page

Just a simple EDIT request. I want to modify the headers so that when I click on the "edit" icon, the header will change to a text field and the "edit" icon will switch to a "save" icon. $('#editheader').click(function(e){ va ...

jqueryhtmlcss

What is the method for retrieving array values from an attribute?

I am currently developing an Angular 6 application and I need to pass and retrieve array values dynamically through attributes. Here is the code snippet I have used for this purpose: HTML: <ul class="list-unstyled" id="list" [attr.parent_id]="123"> ...

javascriptarraysangulartypescriptattributes

The use of "app.use("*") appears to be triggering the function repeatedly

app.use("*", topUsers) is being invoked multiple times. The function topUsers is called repeatedly. function topUsers(req, res, next){ console.log("req.url", req.url) findMostUsefullReviewsAggregate(6) .then(function(aggregationResult){ ...

javascriptnode.jsexpressmongooseejs

What is preventing this from retrieving the source code?

I'm trying to retrieve the HTML source code from http://yahoo.com/(index.html) and display it in a dialog box using this code snippet: $.ajax({ url: 'http://yahoo.com', success: function(data) { alert(data); } }); Unfortunately, ...

javascriptjqueryajax