В общем получил такой код в результате
function createInfoIcon(parent) {
NS = 'http://www.w3.org/2000/svg';
svg = document.createElementNS(NS, 'svg');
svg.setAttribute('xmlns', NS);
svg.setAttribute('version', '1.0');
svg.setAttribute('width', '256');
svg.setAttribute('height', '256');
defs = document.createElementNS(NS, 'defs');
svg.appendChild(defs);
x1 = ['162','169','123.5'];
y1 = ['228', '227', '34.5'];
x2 = ['101', '94.5', '132'];
y2 = ['41', '42', '116'];
stopColors = ['white', 'white', '#2A4FE4', '#447BFA', '#69A3FF', '#89BEFF', '#80BEFF', 'white', 'white'];
stopOpacity = ['0.95', '0.75', '1', '1', '1', '1', '1', '1', '0.5'];
stopOffset = ['0', '1','0', '0.5', '0.625', '0.75', '1', '0', '1'];
stopsStart = ['0','2','7'];
stopsEnd = ['1','6','8'];
cx = ['128', '128', '138'];
cy = ['128', '128', '76'];
r = ['103', '94', '14'];
fill = ['url(#linearGradient1)', 'url(#linearGradient2)', 'white'];
for(var i=0; i<3; ++i) {
id = 'linearGradient'+parseInt(i+1);
linearGradient = createLinearGradient(NS, x1[i], y1[i], x2[i], y2[i], id, 'userSpaceOnUse');
createStop(linearGradient, NS, stopColors, stopOpacity, stopOffset, stopsStart[i], stopsEnd[i]);
defs.appendChild(linearGradient);
}
createCircle(svg, NS, cx, cy, r, fill, 0);
createCircle(svg, NS, cx, cy, r, fill, 1);
path = document.createElementNS(NS, 'path');
path.setAttribute('d', 'M 123.30585,191.07575 C 129.02124,187.76374 138.24211,176.49437 141.6732,168.65732 C 141.6732,168.65732 138.1399,167.1567 138.1399,167.1567 C 131.0411,179.5796 120.02693,188.70016 123.71066,173.32458 C 123.71066,173.32458 145.45687,105.04964 145.45687,105.04964 C 139.77784,104.57639 111.00423,109.17626 106.51327,110.10356 C 106.51327,110.10356 105.79723,113.88169 105.79723,113.88169 C 115.61397,114.21756 116.94651,118.2341 116.23663,121.5238 C 116.23663,121.5238 99.927949,173.57586 99.927949,173.57586 C 99.927949,173.57586 97.881571,179.46474 97.947071,183.84902 C 98.105167,193.86006 111.11196,197.7125 123.30585,191.07575 z ');
path.setAttribute('fill', 'white');
svg.appendChild(path);
createCircle(svg, NS, cx, cy, r, fill, 2);
path2 = document.createElementNS(NS, 'path');
path2.setAttributeNS(NS, 'd', 'M 128,31.59375 C 86.871341,31.59375 51.74836,57.401715 37.90625,93.6875 C 56.732365,110.35912 96.245675,118.37197 128.03125,118.625 C 128.07285,118.62467 128.02111,118.62533 128.0625,118.625 C 160.09769,118.36974 199.12268,109.67594 217.71875,92.6875 C 203.61988,56.922098 168.75455,31.593751 128,31.59375 z ');
path2.setAttributeNS(NS, 'opacity', '0.45');
path2.setAttributeNS(NS, 'fill', 'url(#linearGradient3)');
path2.setAttributeNS(NS, 'filter', 'url(#filter2)');
svg.appendChild(path2);
parent.appendChild(svg);
}
function createStop(parent, NS, colors, opacity, offset, start, stop) {
for(var i=start; i<=stop; ++i) {
stopLine = document.createElementNS(NS, 'stop');
stopLine.setAttribute('xmlns', NS);
stopLine.setAttributeNS(NS, 'stop-color', colors[i]);
stopLine.setAttributeNS(NS, 'stop-opacity', opacity[i]);
stopLine.setAttributeNS(NS, 'offset', offset[i]);
parent.appendChild(stopLine);
}
}
function createCircle(parent, NS, cx, cy, r, fill, pos) {
circle = document.createElementNS(NS, 'circle');
circle.setAttribute('xmlns', NS);
circle.setAttributeNS(NS, 'cx', cx[pos]);
circle.setAttributeNS(NS, 'cy', cy[pos]);
circle.setAttributeNS(NS, 'r', r[pos]);
circle.setAttributeNS(NS, 'fill', fill[pos]);
parent.appendChild(circle);
}
function createLinearGradient(NS, x1, y1, x2, y2, id, gradientUnits) {
linearGradient = document.createElementNS(NS, 'linearGradient');
linearGradient.setAttribute('xmlns', NS);
linearGradient.setAttributeNS(NS, 'x1', x1);
linearGradient.setAttributeNS(NS, 'y1', y1);
linearGradient.setAttributeNS(NS, 'x2', x2);
linearGradient.setAttributeNS(NS, 'y2', y2);
linearGradient.setAttributeNS(NS, 'id', id);
linearGradient.setAttributeNS(NS, 'gradientUnits', 'userSpaceOnUse');
return linearGradient;
}
он работает, и браузер даже подсвечивает элементы, но почему-то их не видно на странице. хотя если скопировать сгенерирванный код и сохранить в svg файл, то файл открывается с рисунком.
