SVG: The styles defined in CSS are not being implemented

I created an HTML file that includes a SVG element along with some CSS styles imported correctly, such as:

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}

Within the SVG, there is an element structured like this:

<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>

The issue I am facing is that despite the inline CSS properties, the rect element does not seem to inherit the styles defined by cell-border. It's puzzling because the CSS file works fine for other elements (non-SVG) in the document. These SVG elements are generated using D3.

csssvg

Answer №1

The functionality has been successfully demonstrated in this fiddle: http://jsfiddle.net/j0g8rnqu/1/

This indicates that your css and svg elements are correct. Any issues may lie with how you are linking the css file. Following the standard procedure should resolve the problem. Here is a basic example:

test.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="svg-test.css">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible">
      <rect class="cell cell-border" width="256" height="256" style="fill: #79a;"></rect>
    </svg>
  </body>
</html>

svg-test.css

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}

Note the inclusion of overflow="hidden" in the svg to prevent cropping of the border.

Answer №2

It appears to be effective in my case. The initial rectangle has the designated class and therefore displays the stroke, while the lower one does not.

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}
<svg height="258" width="258" viewBox="-1 -1 258 258">
  <rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>

<svg height="258" width="258" viewBox="-1 -1 258 258">
  <rect width="400" height="400" style="fill-opacity: 0.7;"></rect>
</svg>

Answer №3

After numerous attempts, I found a successful solution by incorporating the external CSS file using a different method:

<style>
       @import url(css/MatrixVisualization.css)
</style>

Instead of the traditional approach, another option is to utilize embedded CSS declarations.

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

Difficulty in managing vertical overflow in a dynamically sized table using Bootstrap

I am facing an issue with the table-responsive class that is causing a scroll on the y-axis even though it is not specified in the CSS. Shown below is a screenshot of the problem, and I have also managed to replicate the bug: <div id="app"> <d ...

cssvue.jsbootstrap-4vue-multiselect

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

javascriptjquerycss

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

javascriptjqueryhtmlcssajax

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

javascripthtmlcss

Content not being displayed by Javascript

I'm having trouble displaying content using JavaScript DOM. Every time I try to run my code, the page comes up blank. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <title>Radiant HQ</titl ...

javascriptjqueryhtmlcssweb

Node application experiencing issues retrieving SVG files during production

When testing my application locally, the svg files display correctly with the code below (Angular.js variables are used within curly brackets): <img ng-src="img/servant_{{servant.personality}}.svg" draggable="false"> However, once deployed on Herok ...

javascriptnode.jsangularjssvgexpress

The issue with ng-repeat causing incorrect image width in Flexslider

My webpage features image scrolling functionality, powered by Flexslider. The images on the page are sorted by date - for example, selecting "last 7 days" will display images from the past week (data managed through AngularJS). However, when the JSON dat ...

javascriptjqueryangularjscssflexslider

Adjust the color of the label when the input is marked as invalid with .ng

My form is structured using a template-driven approach. <div class="form-group"> <label for="guitar" class="col-sm-6">Guitar:</label> <div class="col-sm-6"> <input id="guitar" type="text"> <p *ngI ...

cssangular

The code is not displaying correctly in Chrome, but it works fine when viewed on a live server

While developing a webpage in Vscode, I noticed that all my CSS and Bootstrap SASS styles render correctly. However, when opening the page without using Vscode live server, some of the styles are not being applied. ...

htmlcssbootstrap-4

Align Horizontal Fixed Element

<html> <head> <style> #rectangle { position: absolute; right: 0; bottom: 0; width: 150px; height: 200px; } </st ...

javascripthtmlcss

Automatic table width expansion with CSS

I'm in the process of creating a new website, and I want the layout to resemble the following: +---+--------------+ |# | | |n | #page | |a | table.basic | |i | | |g | | |a | | |t | ...

htmlcss

Transform Java code into HTML format for a visually appealing display similar to that in an Integrated Development Environment

Is there a way to showcase my Java code on an HTML page to resemble an Integrated Development Environment (IDE)? I've been searching for existing solutions but haven't found anything satisfactory yet. Ideally, I am looking for something similar t ...

javahtmlcssformattingide

Is it possible to animate CSS Grid components?

Is it possible to animate a re-ordered set of elements in an array that are arranged using a CSS Grid layout? Check out this quick boilerplate ...

reactjscssanimationcss-grid

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

Tips for toggling the visibility of the 'more' button based on the number of lines in a paragraph

While writing code using HTML, CSS, JavaScript, and Bootstrap, I encountered an issue with the "show more" link. The problem arises when there is only one line in the paragraph; I would like the "show more" link to be hidden and not displayed on the screen ...

javascriptjqueryhtmlcssbootstrap-4

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

javascripthtmlcssvideo