CODEWITHSUNDEEP
javascriptsvgd3.js
Orion
Orion

Reputation: 7

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?

Upvotes: 0

Views: 2343

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101956

Try:

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

Upvotes: 0

Francis Hemsher
Francis Hemsher

Reputation: 3498

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.

Upvotes: 0

RashFlash
RashFlash

Reputation: 1002

Using JavaScript , you can easily change attributes.

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

Upvotes: 1

Related Questions