How to change from this svg with this complex path that has fill to the above svg that has simple path with no fill?

StackOverflow https://stackoverflow.com/questions/20851370

Question

I have some svg files that have complex/compound paths. These paths that are drawn with pressure sensitive pens in Inkscape or Illustrator, have tiny fills in between the paths. In Illustrator you can select the entire path, and then change the pen to basic pen( no pressure sensitivity) and this changes the path to simple paths. How can I achieve this using js?

I have 2 examples of both kind of the paths here:

   http://jsfiddle.net/KRKz9/3/ 

How to change from this svg with this complex path that has fill to the above svg that has simple path with no fill using js?

Edit: Hi @ Robert.Here I have it like this:

function makeSame() { 
var paths = maing.getElementsByTagName("path"); 
for (var i=0, max=paths.length; i < max; i++) { paths[i].style.stroke="none"; paths[i].style.fill="blue"; 
paths[i].style.stroke_width=2; 
} } 

and in jsbin : jsbin.com/sovit/1/edit

I am stuck here, could you please correct this?

Edit: Thank you @robert. I just corrected it like this:

var paths = document.getElementsByTagName("path"); 

And now the problem is that, the duplicated path is still there: ( this jsfiddle example with the svg code produced using the above code, shows that each line seems to be having 2 paths)

http://jsfiddle.net/Y35sV/2/

Is that possible to remove the second path for each line please?

Was it helpful?

Solution

Something like this perhaps?

function makeSame() {

    var paths = document.getElementsByTagName("path");
    for (var i=0, max=paths.length; i < max; i++) {
        paths[i].style.stroke="none";
        paths[i].style.fill="#0000C6";
    }
}

This will convert the paths changing their fill and stroke so they match.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top