Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2016, 15:43
Аспирант
Отправить личное сообщение для McLotos Посмотреть профиль Найти все сообщения от McLotos
 
Регистрация: 18.11.2010
Сообщений: 56

Не получается создать 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);
выводит правильное имя, с большими буквами.

Последний раз редактировалось McLotos, 02.08.2016 в 15:47.
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2016, 17:37
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

С каких это пор в хтмле регистр букв начал иметь значение? Во-вторых у тебя нет текста, а только данные в меморе после такой процедыры.

UDP SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML). То есть забираю наезд.

Последний раз редактировалось warren buffet, 02.08.2016 в 17:42.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2016, 17:46
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Короче, как я понял, NS надо добавлять везде, смотри тут как делают http://stackoverflow.com/questions/3...-createelement

То есть feGaussianBlur = document.createElementNS... и так далее.
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2016, 20:36
Аспирант
Отправить личное сообщение для McLotos Посмотреть профиль Найти все сообщения от McLotos
 
Регистрация: 18.11.2010
Сообщений: 56

В общем получил такой код в результате
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 файл, то файл открывается с рисунком.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2016, 11:18
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Проверяй в каком-нить валидаторе свой svg, их полно в онлайне.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается создать объект PDO для соединения с Oracle annie88 Серверные языки и технологии 7 20.05.2016 16:33
Не получается создать исполняемый файл nodejs FanAizu AJAX и COMET 9 08.02.2015 19:50
Как программно создать форму и добавить контролы в неё? aristov Dojo toolkit 1 12.11.2011 23:55
Создать узел <img> внутри <div> glutton Events/DOM/Window 1 09.11.2009 14:41
DOM в IE. Не получается создать атрибут name SiZE Events/DOM/Window 1 04.05.2009 11:30