javascript - Styling an SVG line with CSS -

is there way style svg line css? have tried adding. want add classes onclick jquery later on. add class, change stroke colour.

.black {   fill: black!important;   stroke: black!important; } 

to svg

<g id="layer_1">         <image display="none" overflow="visible" width="1800" height="4913" xlink:href="../../../../desktop/gcs-career-path.jpg"  transform="matrix(1 0 0 1 -405.5005 -428.001)"></image>         <polyline class="black" fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" points="546.834,107.001 550.723,105.249 641.501,64.334"/>         <line class="black" fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="641.501" y1="151" x2="551.168" y2="109.667"/>         <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="151" x2="739.834" y2="108.001"/>         <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="64.334" x2="739.834" y2="105.5"/>         <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="746.168" y1="105.5" x2="840.834" y2="77.997"/>         <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="848.166" y1="77.997" x2="943.833" y2="97.667"/> </g> 

sure can!

i have modified/simplified example in jsfiddle, can try it.

where html is:

<button> add class </button> <svg width="1050" height="355">     <polyline fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" points="546.834,107.001 550.723,105.249 641.501,64.334"/>     <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="641.501" y1="151" x2="551.168" y2="109.667"/>     <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="151" x2="739.834" y2="108.001"/>     <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="646.834" y1="64.334" x2="739.834" y2="105.5"/>     <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="746.168" y1="105.5" x2="840.834" y2="77.997"/>     <line fill="#cdced0" stroke="#d0d0d0" stroke-width="2" stroke-miterlimit="10" x1="848.166" y1="77.997" x2="943.833" y2="97.667"/> </svg>    

css:

.black {   stroke: black; }    

and jquery:

$("button").on("click", function() {     $("line").addclass("black"); });    

it seems whatever comes css class overrides existing svg attributes values.