javascript - 使用 CSS 样式化 SVG 线条

Question

有什么方法可以用 CSS 来设置 SVG 行的样式吗？我试过添加。我想稍后用 JQuery 添加类 onclick。这将添加 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 类的任何内容都会覆盖现有的 SVG 属性值。