Javascript 使用CSS设置SVG行的样式
是否有任何方法可以使用Javascript 使用CSS设置SVG行的样式,javascript,css,svg,Javascript,Css,Svg,是否有任何方法可以使用CSS设置SVG行的样式?我试着加上。我想稍后用JQuery添加类onclick。这将添加类,然后更改笔划颜色 .black { fill: black!important; stroke: black!important; } 到我的SVG <g id="Layer_1"> <image display="none" overflow="visible" width="1800" height="4913" xlink:href
CSS
设置SVG
行的样式?我试着加上。我想稍后用JQuery
添加类onclick
。这将添加类
,然后更改笔划颜色
.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>
当然可以
我在这篇文章中修改/简化了你的例子,所以你可以试试
其中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>
和jQuery:
.black {
stroke: black;
}
$("button").on("click", function() {
$("line").addClass("black");
});
似乎来自CSS
类的任何内容都会覆盖现有的SVG
属性值