Не получается создать feGaussianBlur
Добрый день!
Пытаюсь сгенерировать svg не получается создать элемент feGaussianBlur он создается как fegaussianblur и не работает. svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute('xmlns','http://www.w3.org/2000/svg'); svg.setAttribute('version', '1.0'); svg.setAttribute('width','256'); svg.setAttribute('height','256'); svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); def = document.createElement('defs'); filters = ['1','2']; blurs = ['1.75','0.35']; for(i=0; i<2; ++i) { filter = document.createElement('filter'); filter.setAttribute('id', 'filter'+filters[i]); feGaussianBlur = document.createElement('feGaussianBlur'); feGaussianBlur.setAttribute('stdDeviation', blurs[i]); filter.appendChild(feGaussianBlur); def.appendChild(filter); } svg.appendChild(def); Что не так делаю? при этом console.log(feGaussianBlur.nodeName); выводит правильное имя, с большими буквами. |
С каких это пор в хтмле регистр букв начал иметь значение? Во-вторых у тебя нет текста, а только данные в меморе после такой процедыры.
UDP SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML). То есть забираю наезд. |
Короче, как я понял, NS надо добавлять везде, смотри тут как делают http://stackoverflow.com/questions/3...-createelement
То есть feGaussianBlur = document.createElementNS... и так далее. |
В общем получил такой код в результате
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 файл, то файл открывается с рисунком. |
Проверяй в каком-нить валидаторе свой svg, их полно в онлайне.
|
Часовой пояс GMT +3, время: 02:32. |