Is it possible to have two strokes on an SVG element? - css

Question

I have some SVG elements (rectangles). When I double click on these I add a class to the rectangle.
This class is like so :
.highlighted {
stroke: green;
stroke-width : 3px;
}
Basically a green border. I tried the class like this :
.highlighted {
border: 3px solid green;
}
But it doesn't work as I'm working with SVG not HTML.
My question is, is it possible to have multiple strokes on one SVG rectangle element ?

Answer 1

At present the answer is no.
You would need a second rectangle to create the other 'stroke'.
There is hope however
Extract from the W3 spec
SVG 2 supports multiple strokes, which we will need updated wording to handle in this specification.
As for borders...they do not apply to SVG internal elements such as paths and rectangles etc....only the full SVG itself.

Answer 2

It is possible to have multiples borders on a div (with outline and border), but not on SVG.
You can to try with multiple paths.
My SVG knowledge is pretty minimal, but I think it should be possible to achieve these results using SVG Vector Effects.
"Vector effects allows stroking to be applied multiple times."
http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffectsPrimer.html
Also, read this, please:
https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

Answer 3

I don't know how to do it with a rectangle element but I can think of a way for circle and ellipse elements
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255)" />
<stop offset="20%" style="stop-color:rgb(255,255,255)" />
<stop offset="20%" style="stop-color:rgb(100,255,255)" />
<stop offset="40%" style="stop-color:rgb(100,255,255)" />
<stop offset="40%" style="stop-color:rgb(50,5,255)" />
<stop offset="60%" style="stop-color:rgb(50,5,255)" />
<stop offset="60%" style="stop-color:rgb(50,50,25)" />
<stop offset="80%" style="stop-color:rgb(50,50,25)" />
<stop offset="80%" style="stop-color:rgb(250,0,0)" />
<stop offset="100%" style="stop-color:rgb(250,0,0)" />
</radialGradient>
</defs>
<circle cx="70" cy="70" r="55" fill="url(#grad1)" />
<ellipse cx="250" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>