Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like
path { border: 3px solid green; }
do not seem to work.
Is there a way to apply borders, outlines, or strokes to SVG elements on webpages using CSS?
If using CSS, the following code snippet can be used:
path {
fill: none;
stroke: #646464;
stroke-width: 1px;
stroke-dasharray: 2,2;
stroke-linejoin: round;
}
Consider implementing CSS filter() dropshadow (this can be used on any svg element: <img>, background-image, in the dom, etc.)
or
svg {
fill: #fff;
}
#example_1 {
filter:
drop-shadow(-1px -1px 0px #3e68ff)
drop-shadow(2px -1px 0px #3e68ff)
drop-shadow(2px 2px 0px #3e68ff)
drop-shadow(-1px 2px 0px #3e68ff)
}<svg id="example_1" width="100" height="100" viewBox="0 0 288 288">
<path class="st0" d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18
c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c-15.98,0,22.02-1.48,34.32-4.84
C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
</svg>
<svg id="example_2" width="100" height="100" viewBox="0 0 288 288">
<defs>
<filter id="shadow">
<feDropShadow dx="-2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
<feDropShadow dx="2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
<feDropShadow dx="2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
<feDropShadow dx="-2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
</filter>
</defs>
<g filter="url(#shadow)">
<path d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18
c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c-15.98,0,22.02-1.48,34.32-4.84
C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
</g>
</svg>You may also devise a javascript function that duplicates each of the elements inside the svg, eliminating fill/stroke attributes, and enclosing them in a g tag with fill="none" and stroke attributes set. Then insert that into the svg.
Looking to style SVG elements with border, outline, or stroke using CSS? Here's how you can achieve it:
path { outline: 3px solid green; }
Keep in mind that as of the year 2018, this feature is supported by Chrome and Safari but may not be available on all modern browsers. An example of applying an outline via CSS to a group (<g>) with paths inside can be seen below.
In a static view, the outline looks good. However, when dynamically dragging elements, artifacts may appear periodically (usually to the left).
https://i.stack.imgur.com/BTkR6.png
Update:
<g> elements.Referencing this response from a related inquiry, illustrating the creation of an outline effect as opposed to a stroke:
stroke: black;
stroke-width: 4px;
stroke-linejoin: round;
paint-order: stroke;
I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...
I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...
I would like to generate a table resembling a matrix without numerical values. 1. Here is an example of my database table: | CODE | STIL | SUBSTIL | PRODUS | |------|-------|----------|---------| | R | stil1 | substil1 | produs1 | | R | stil1 | s ...
As a newcomer to web development, I decided to challenge myself by building an E-Commerce website to enhance my skills. To ensure mobile responsiveness, I opted for a hamburger menu to hide the navbar content. However, despite resizing working flawlessly, ...
For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...
In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...
I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced. This is ...
I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...
I'm working on setting up UI Bootstrap tabs, and for reference you can find the plunker here. My goal is to hide the tabs since I will be utilizing a button to switch between them. Despite adding the following CSS class to my file, the styling is not ...
In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...
I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...
When placing textBox1 at a y-position of 200, getBoundingClientRect is returning a value of 190. What could be causing this discrepancy? For more details and code snippets, please refer to the following link: https://codepen.io/anon/pen/REKayR?editors=101 ...
Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...
I have been struggling to find a solution to my problem without resorting to custom CSS classes. I'm wondering if it's possible to achieve what I need using only flex classes. Here is the code for a simple navbar component: <Navbar bg ...
As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom. You can view the image link of ...
When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...
I have attempted this: d3.select(".cell:first") d3.selectAll(".cell").filter(":first") d3.selectAll(".cell").select(":first") but unfortunately, none of these methods are effective. ...
I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...
Can someone help me with a CSS issue I'm experiencing? Here is my code: <div class='test'> <div>test 1</div> <div>test 2</div> </div> <div class='test'> <div>test 3&l ...
Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...