Menu
I'am injecting SVG elements into a webpage thanks to D3js. I have difficulties to style these elements since syntaxes like
path { border: 3px solid green; } doesn't work.
How to add border/outline/stroke to SVG elements in webpages with CSS ?
929
Draw a <rect> round the image which is fill="none". You can use the stroke of the <rect> as the border. This is the correct answer when it comes to svg:image.
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .
The stroke property in CSS is for adding a border to SVG shapes. Remember: This will override a presentation attribute <path stroke="#fff" ... />
In CSS, something like:
path { fill: none; stroke: #646464; stroke-width: 1px; stroke-dasharray: 2,2; stroke-linejoin: round; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With