Как перевести контур в линию?

Question

[Андрей Сверлин]

Доброго времени суток.
Подскажите пожалуйста, как из такого контура:

Сделать вот такой:


В первом случае - контур с заливкой. А во-втором - просто линии определённой толщины. Вот мне бы сделать всё чисто линиями, без заливки.
Хотелось бы узнать есть ли какой-нибудь простой способ, как этого добиться в полуавтоматическом режиме. )) Просто есть пак иконок, и я хочу их анимировать в svg. А так как path везде разный, получается фигня.

Comments

[Yuriy Fred]

сомневаюсь что так можно, не отрисовывая все в ручную

[Андрей Сверлин]

Yuriy Fred, да походу... (
Перерисовал уже.. )

Answer 1

[Андрей Демидкин]

На ум приходит только разъединить контур и ручками править по точкам. В CorelDraw выделяешь объект. Жмешь F10, выделяешь точку (вершину). Правой кнопкой > Разъединить. Получаешь вместо фигуры(контура) просто кривую. Дальше ручками двигаешь/удаляешь нужные/не нужные точки.

Comments

[Андрей Сверлин]

Спасибо за ответ. С корелом не особо дружу. Я кароче перерисовал всё заново в Figme и замутил-таки анимацию для всех svg'шек. Причем я написал скрипт, который встраивается в svg и автоматически рассчитывает длину линий и мутит анимацию рисования. Если кому нужен то вот:

var paths = document.querySelectorAll('svg path').length;     
    var over = "document.getElementById('trans1').beginElement();";    
    for(var i = 1; i != paths; i++){
        var x = i+1;
        over = over + "document.getElementById('trans"+x+"').beginElement();";         
    }
    var svg = document.querySelector('svg');
    var svg_w = svg.getAttribute('width');
    var svg_h = svg.getAttribute('height');
    svg.setAttribute("onmouseover",over);
    
    var rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); 
    rect.setAttribute('width',svg_w);  
    rect.setAttribute('height',svg_h);  
    rect.setAttribute('opacity',0);  
    rect.setAttribute('fill','#000');  
    svg.appendChild(rect);
    
    
    [].forEach.call(document.querySelectorAll('svg path'), function(el,i) {            
        var path = Math.round(el.getTotalLength()),
            timer = 960;
        i++; 
           
        el.setAttribute('stroke-dasharray', path);
        el.setAttribute('stroke-dashoffset', path);        
                
        var ani = document.createElementNS("http://www.w3.org/2000/svg","animate");        
        ani.setAttribute('id','trans'+i);
        ani.setAttribute('attributeName','stroke-dashoffset');
        ani.setAttribute('values','0; '+path+'; 0');
        ani.setAttribute('begin','0ms');
        ani.setAttribute('dur',timer+'ms');
        ani.setAttribute('repeatCount','1');
        ani.setAttribute('fill','freeze');
        ani.setAttribute('calcMode','linear');
        ani.setAttribute('restart','whenNotActive');
        el.appendChild(ani);       
    });