使用CSS設計SVG線

Question

有什麼方法可以用CSS來設計SVG線？我曾嘗試添加。我想稍後添加類onclick和JQuery。這將添加class，然後更改筆觸顏色。

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

我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> 

Answer 1

當然可以！

我已修改/簡化您的示例JSFIDDLE，因此您可以嘗試。

凡HTML是：

<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; 
} 

和jQuery的：

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

看來，世界衛生大會來自CSS類的tever覆蓋現有的SVG屬性值。