CSS has the ability to override the fill color of paths on an SVG map

An SVG map on my website contains over 20 areas, each with a unique color defined within the HTML of the map.

However, there seems to be an issue where the fill color of the path(s) is not displaying correctly due to the CSS stylesheet overriding it.

The specific CSS code causing this problem is:

path {
    fill: #20487c;
}

This is resulting in some blue areas being incorrectly displayed. Unfortunately, I do not have access to the CSS stylesheet to make any changes. Is there a way to fix this directly in the <body> section of the page?

/* This is what's overriding colors */
path {
    fill: #20487c;
}

path:hover, polygon:hover {
  fill-opacity: 1.00 !important;

}
<br/>
<h3>Blue Color areas are incorrect.</h3>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
<path id="area_01" fill-opacity='0.5' fill="#FDE9AB" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>
<path id="area_02" fill-opacity='0.5' fill="#F28667" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/>
<polygon id="area_03" fill-opacity='0.5' fill="#E25C56" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/>
<polygon id="area_04" fill-opacity='0.5' fill="#9B3D37" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 
225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/>
<path id="area 05" fill-opacity='0.5' fill="#FDE9AB" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15
C127.9,68.9,122,70,122,70z"/>
<path id="area 06" fill-opacity='0.5' fill="#9B3D37" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1
l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/>
<polygon id="area 07" fill-opacity='0.5' fill="#F28667" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 
73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/>
<polygon id="area 08" fill-opacity='0.5' fill="#E25C56" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 
43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/>
<polygon id="area 09" fill-opacity='0.5' fill="#9B3D37" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 
120,150 104,137 "/>
</svg>

htmlcsssvg

Answer №1

The order of precedence between SVG presentation attributes and CSS rules targeting the same attributes is as follows, from least important to most important:

  • User agent default styles
  • SVG presentation attribute
  • CSS rule set in style-sheet *
  • CSS rule set in style attribute
  • CSS rule set in style-sheet with !important keyword
  • CSS rule set in style attribute with !important

* From point 3, normal CSS selector importance rules apply.

To give higher importance in your markup, you can convert all SVG presentation attributes into CSS rules in the style attribute:

/* These are overriding colors*/

path {
  fill: #20487c;
}

path:hover,
polygon:hover {
  fill-opacity: 1.00 !important;
}
<br/>
<h3>No more blue colors</h3>

<svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
<path id="area_01" style="fill-opacity:0.5; fill:#FDE9AB" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>
<path id="area_02" style="fill-opacity:0.5; fill:#F28667" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/>
<polygon id="area_03" style="fill-opacity:0.5; fill:#E25C56" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/>
<polygon id="area_04" style="fill-opacity:0.5; fill:#9B3D37" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 
225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/>
<path id="area 05" style="fill-opacity:0.5; fill:#FDE9AB" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15
C127.9,68.9,122,70,122,70z"/>
<path id="area_06" style="fill-opacity:0.5; fill:#9B3D37" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1
l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/>
<polygon id="area 07" style="fill-opacity:0.5; fill:#F28667" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 
73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/>
<polygon id="area 08" style="fill-opacity:0.5; fill:#E25C56" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 
43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/>
<polygon id="area 09" style="fill-opacity:0.5; fill:#9B3D37" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 
120,150 104,137 "/>
</svg>

However, it would be best to revise the conflicting CSS so that it only targets the intended elements.

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

Scroll-triggered animation of SVG paths in React

While achieving this in vanilla Javascript is relatively simple (check out this for an example), I'm encountering difficulties implementing it in React, especially with a library like Framer Motion for animations. Framer Motion's useViewPortScro ...

javascriptreactjssvgframer-motion

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks: https://i.sstatic.net/T2Lur.png Here ...

javascripthtmlcssember.js

Having difficulty leveraging the full capabilities of the Jquery.load() function

I'm currently facing an issue where the results I want to display to the user are not filtering properly based on their selection. I've been using GET on the same page (users.php?rid=) to process this, but for some reason, it seems to be loading ...

javascriptphpjqueryhtml

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

Issue with submitting a form within a React modal - lack of triggering events

I am utilizing the npm package react-modal (https://www.npmjs.com/package/react-modal) in my project. The issue I am facing is that when I click on 'Submit', nothing happens. The function handleSubmit</a> is not being triggered, as no conso ...

javascripthtmlreactjsnext.js

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript

As I scroll, I wish for the search bar to remain fixed at the top of the

Help needed! I'm currently working on a website for a client, and they want the search bar to stay fixed as users scroll down. I've been struggling with this task and can't seem to get it right. Any assistance would be greatly appreciated. T ...

htmlsearchbar

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

Switching Classes with a Click of a Button

Hey there, I'm currently using this menu: spoilers.tumblr.com/tvschedule, and I have a script below. The functionality works well with the click event, but I'm having some trouble with the hovering effect. To make certain classes visible on hover ...

javascriptcsstoggleaddclassremoveclass

The video on my site is refusing to play

I'm having an issue with a 2-second video that is not playing, yet when I tried a 10-second video it worked perfectly. Why is this happening? Could it be that HTML does not support videos that are shorter than 1-2 seconds? It seems like it's onl ...

htmlcssvideoattributes

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

cssbrowserfontscross-browserhtml-rendering

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

javascripthtmljquerycssbootstrap-4

Utilizing jQuery UI to dynamically alter CSS classes

I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...

javascriptjqueryhtmlcssjquery-ui

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

When I include the following line of HTML code: <td> <img align="center" [src]="productByBarCode.imageUrl" /> </td> An error is thrown by the console: ERROR TypeError: Cannot read properties of undefined (reading &a ...

htmlangulartypescriptangular-material

Decode my location and input the address before validating it

While I have come across numerous plugins that enable geolocation and display it on a map, I am searching for something unique. I am interested in implementing geocoding when a user visits the page with an option to "allow geolocation." If the user agrees ...

javascripthtmlgeolocationgeocoding

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...

javascripthtml

Ways to prevent an element from being affected by a CSS Bootstrap class

Is there a way to exclude the container class from affecting the jumbotron class in Bootstrap 4? In my PHP project using the MVC pattern, I have a header included on every page that ends with <main class="container">. However, on the home page, I wa ...

htmlcsstwitter-bootstrap-4

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

Adding a delay to text within a React JS component: Mastering the art

I am facing a challenge in my React component where I want each line of text to render with a 2-second delay. Although I am proficient in using React and JavaScript, I am struggling with the code execution for this particular requirement. My initial thou ...

javascripthtmlreactjsreact-hooks

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...

javascripthtmlcssmaterialize