So my problem is that I'm tying to get the stroke
values to send as a post request just like my script currently does the points
attribute values in the post request... l: (JSON.stringify(line))
<< Just like that in the post request but I need it to do the stroke
values. So if it's possible to use something like c: (JSON.stringify(stroke))
I want to match the lines with their stroke colors and send the request with the color just like the line.
The stroke value is inside the style
attribute of that SVG. Here's a image showing exactly what I need to log just like it does the points
.
So yeah, simply parse and send it like it does the points
values..
I've tried making a const just like the LINES
but no luck.
xhr=new XMLHttpRequest();
xhr.open("GET", "http://colorillo.com/blqu.inline.svg");
xhr.addEventListener("load", function() {
const xmlDoc = new DOMParser().parseFromString(
this.responseText.trim(),
"image/svg+xml"
);
const Lines = Array.from(xmlDoc.getElementsByTagName('polyline'), pl =>
pl.getAttribute('points').split(' ').map(pair =>
pair.split(',').map(Number)));
Lines.forEach(line => $.post("/draw.php?ing=_index", {
l: (JSON.stringify(line)),
w: ("1"),
c: (JSON.stringify(Stroke)), //<<<< MY ERROR IS HERE!!!
o: ("75"),
f: ("1"),
_: ("false")
}));
});
xhr.send();
Here you go, just search the array for 'stroke' like this:
xhr = new XMLHttpRequest();
xhr.open("GET", "http://colorillo.com/blqu.inline.svg");
xhr.addEventListener("load", function() {
const xmlDoc = new DOMParser().parseFromString(
this.responseText.trim(),
"image/svg+xml"
);
let output = [];
// Get all polylines as strings
let lines = xmlDoc.getElementsByTagName('polyline');
// Loop over all lines
for(let line of lines) {
//Define more vars here...
//Often times you can just use something like below and don't need to put it in the loop.
let stroke = null; //See Bruce'es comment (rgb() as output): line.style.stroke;
let opacity = line.style.opacity;
let strokeWidth = line.style.strokeWidth;
// Loop over all styles of this line (output same as input [hex])
for(let style of line.getAttribute('style').split(';')) {
// Get name & value
let valueOffset = style.indexOf(':');
// Check if name equal to 'stroke'
let value = style.substr(valueOffset + 1).trim()
switch(style.substr(0, valueOffset).trim()) {
case 'stroke':
// Save stroke value
stroke = value;
// Break out of the loop (we don't have to search further)
break;
}
}
output.push({
l: (JSON.stringify(line.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number)))),
w: (strokeWidth),
c: (stroke),
o: (opacity),
f: ("1"),
_: ("false")
});
}
$.post("/draw.php?ing=_index", output);
});
xhr.send();
Hope this helps. -Minding
Comments are not for extended discussion; this conversation has been moved to chat.