How to add border / outline / stroke to SVG elements in CSS?

Question

I injected SVG elements into a webpage thanks to D3js. I am having difficulty with the style of these elements, since syntaxes like

path { border: 3px solid green; } 

does not work.

How to add border / outline / stroke to SVG elements in web pages using CSS?

Answer 1

In CSS , something like:

 path { fill: none; stroke: #646464; stroke-width: 1px; stroke-dasharray: 2,2; stroke-linejoin: round; } 

Change: typo

Answer 2

To the question: how to add border / outline / stroke to SVG elements in CSS web pages?

You can do in CSS:

 path { outline: 3px solid green; } 

Please note that since 2018 it is supported by chrome and safari, but may not be available in all modern browsers. See the example below:

I applied the scheme through CSS to the <g> group with paths inside. In statics, it looks good. In dynamic (drag and drop), I periodically see these artifacts (left)

UPDATE:

• if the contour is “solid” - there are no artifacts
• Safari mobile does not support the outline of <g> elements ...

Answer 3

Try adding shadows.

Here it does not look as clean as in my codes, but it can still be useful.

 svg { filter: drop-shadow(1px 1px 0px #111) drop-shadow(-1px 1px 0px #111) drop-shadow(1px -1px 0px #111) drop-shadow(-1px -1px 0px #111); } .arr { fill: none; stroke: #5457ff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } 

 <svg height="45" width="40"> <g class="arr"><path d="m 5 20 l 15 -15 l 15 15 m -15 0 l 0 20"/></g> </svg>