简体   繁体   中英

How do I set svg path style in js?

I have path, that's how it looks in svg

<path
   style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
   d="m 117.14283,292.36218 c 6.4302,40.00204 17.7957,72.08138 42.8572,97.14285 41.9864,41.98645 170.1489,-58.42248 108.5714,-120 -34.4011,-34.4011 -81.0249,123.66456 -65.7143,154.28572 20.1806,40.36118 166.194,14.76546 134.2857,-17.14286 -49.3132,-49.31326 -75.8868,85.36926 -60,117.14286 30.4479,60.89583 115.0776,-13.49389 97.1429,-31.42857 -3.4884,-3.48837 -113.508,91.67283 -22.8572,157.14285"
   id="path3024"
   inkscape:connector-curvature="0" /> 

And I select it in js code like this

var path = svg.select("#" + options["pathid"]);

so how do I change stroke-opacity value?

This way doesn't work =(

var path = svg.select("#" + options["pathid"])
      .style('stroke', '#ff0000');

=======================================================

path.style("stroke-opacity", 0); works and

alert(path.style("stroke-opacity")); // returns 0, 

but nothing changed when I start svg in browser, and tag didn't change at all in code. Any ideas?

Using JavaScript , you can easily change attributes.

path.setAttribute('stroke','red');
path.setAttribute('stroke-width','2');

If svg has already been selected by d3, then to access that path you could use:

var path = svg.select("#path3024")

Then the style can be changed as you have shown.

尝试:

.attr('stroke', '#ff0000');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM