RaphaëlJS, codificação indolor e navegadores Stinky (IE, principalmente)
Pergunta
Precisa de alguns conselhos sobre a melhor abordagem para este problema:
Eu me apaixonei perdidamente por Raphaël JS, pois tornou o SVG realizável para mim e para minha codificação, uma vez que conseguiu trazer o IE para o grupo.
No entanto, não gosto de ter que incluir um .js
arquivo para cada gráfico SVG que desejo renderizar na página.
Então, vasculhei a internet para ver se encontrava algo que fosse mais "dinâmico", e encontrei isto:(abaixo está minha versão editada do código que encontrei aqui: http://groups.google.com/group/raphaeljs/msg/ce59df3d01736a6f)
function parseXML(xml) {
if (window.ActiveXObject && window.GetObject) {
var dom = new ActiveXObject('Microsoft.XMLDOM');
dom.loadXML(xml);
return dom;
}
if (window.DOMParser) {
return new DOMParser().parseFromString(xml, 'text/xml');
throw new Error('No XML parser available');
}
}
(function($) {
$.fn.render_raphaels = function(options) {
var defaults, options, counter, img_path, doc, root, vb, dims, img, node, path, atts, container, new_svg, inline;
defaults = {};
options = $.extend(defaults, options);
counter = 0;
inline = false;
// find all the img's that point to SVGs
$('img[src*="\.svg"]').each(function() {
$(this).fadeOut(1000);
img_path = $(this).attr('src');
if (!$(this).attr('id')) new_svg = true;
if ($(this).hasClass('inline')) inline = true;
container = jQuery('<div/>', {
id: $(this).attr('id') ? $(this).attr('id') : 'svg-' + (counter + 1),
'class': $(this).attr('class') ? $(this).attr('class') : 'svg'
}).hide().insertBefore($(this));
$.get(img_path, null, function(doc) {
doc = parseXML(doc);
root = $(doc).find('svg')[0];
dims = [root.getAttribute('width'), root.getAttribute('height')];
if(new_svg) container.css({ width: dims[0], height: dims[1] });
if(inline) container.css('display', 'inline-block');
img = Raphael(container.attr('id'), parseInt(dims[0]), parseInt(dims[1]));
$(root).find('path').each(function() {
node = this;
path = img.path($(this).attr('d'));
$(['stroke-linejoin','stroke','stroke-miterlimit','stroke-width','fill','stroke-linecap']).each(function() {
if($(node).attr(this.toString())) {
path.attr(this, $(node).attr(this.toString()));
} else {
path.attr(this, 0);
}
});
if($(node).attr('style')) {
atts = $(node).attr('style').split(';');
for(var i=0; i < atts.length; i++) {
bits = atts[i].split(':');
path.attr(bits[0],bits[1]);
}
}
});
}, 'text');
$(this).remove(); // removes the original image after the new one has been redrawn
container.fadeIn(2000);
});
};
})(jQuery);
Em essência, isso me permite escrever apenas uma tag de imagem normal com o .svg
gráfico, e o plugin jQuery irá substituí-lo automaticamente pela versão renderizada por Raphaël.
Isso funciona muito bem em navegadores não compatíveis com SVG, como o IE, mas em navegadores modernos que já suportam gráficos SVG, a tag de imagem funciona como está (sem Raphaël), portanto, quando Raphaël carrega, ele descarrega a imagem existente e depois desaparece a versão do Rafael...essencialmente criando uma cintilação.Tentei minimizar isso desaparecendo na nova versão, mas ainda enfrento o problema de que a antiga aparece, fica oculta e depois é mostrada novamente.
Preciso de uma maneira de conciliar o comportamento desejado nos navegadores problemáticos como o IE e o comportamento indesejado nos navegadores modernos e compatíveis com os padrões, como o Safari 4 e o Firefox 3.Mas quero fazer isso de uma maneira que não precise alterar significativamente a maneira como codifico (por que uso o plug-in em primeiro lugar).
Eu sei que o SVG ainda é um pouco inovador, mas alguém tem alguma ideia de como posso contornar isso?
ISENÇÃO DE RESPONSABILIDADE:Se possível, gostaria de ficar longe da segmentação por navegador...Estou procurando uma solução de fluxo de trabalho gerenciável e funcional, não um hack de navegador.
2ª AVISO LEGAL:Não quero uma solução baseada em Flash;Quero ser o mais "nativo" possível e considero o javascript muito mais do que o Flash.(É por isso que estou tão animado com Raphaël, porque posso ficar longe do Flash).
Solução 2
Certo, eu inventei isso...(usando Ruby on Rails, aliás)
- Exportar gráficos SVG para
public/images/svg/
- Correr
rake svg:parse:to_json
(minha fonte de tarefa de rake abaixo) - Redesenhe o gráfico Raphaël usando os dados do caminho JSON.
- Chame meu gráfico SVG usando apenas
<span class="svg">name_of_svg_file</span>
(ocultando o intervalo por padrão usando CSS e redesenhando usando o plugin jQuery modificado abaixo).
Isso significa que meu fluxo de trabalho do Illustrator para HTML é muito limpo (minha tarefa rake é acionada durante a implantação do Capistrano).Isso satisfaz minhas necessidades descritas na minha pergunta, pois é renderizado de forma rápida e sem oscilações em quase todos os navegadores que testei até agora (que Raphaël suporta), não requer Flash e envolve escrever apenas uma linha de código por SVG gráfico (o <span>
tag com o nome do gráfico).
Refatorações são bem-vindas.
Pendência:No momento, se o usuário tiver o javascript ativado desligado, não há substituição.Eu acho que um simples <noscript>
block pode me ajudar aí ...
parse_svg.rake
require 'hpricot' # >= 0.8.2
require 'json/pure'
namespace :svg do
namespace :parse do
desc "Parse all SVG graphics in '/public/images/svg' into JSON libraries in '/public/javascripts/raphael/svg-js/' usable by Raphaël"
task :to_json do
FileList['public/images/svg/*.svg'].each do |svg|
name = File.basename(svg).split('.')[0]
doc = open(svg) { |f| Hpricot.XML(f) } # parse the SVG
js = {} # container
js[:name] = name
js[:width] = doc.at('svg')['width'].to_i
js[:height] = doc.at('svg')['height'].to_i
js[:paths] = [] # all paths
doc.search("/svg/g//path").each do |p|
path = {} # our path hash
path[:path] = p['d'].gsub(/(?:[\r\n\t])+/, ',')
path[:stroke_width] = p['stroke-width'] || 0
path[:stroke] = p['stroke'] || 0
path[:fill] = p['fill'] || 0
js[:paths] << path
end
File.open("public/javascripts/raphael/svg-js/#{name}.js", 'w') { |f| f.write(js.to_json) }
end
puts "Done!"
end
end
end
render_raphaels.jquery.js
(function($) {
$.fn.render_raphaels = function(options) {
var defaults, options, name, container, raphael;
defaults = {
span_id: 'svg-ref'
};
options = $.extend(defaults, options);
// find all the spans that point to SVGs, based on default or passed-in identifier
$('span.'+options.span_id).each(function() {
name = $(this).text();
$.getJSON('/javascripts/raphael/svg-js/' + name + '.js', function(data) {
paper = Raphael(document.getElementById(data.name), data.width, data.height);
for (var p in data.paths) {
paper.path(data.paths[p].path).attr({
fill: data.paths[p].fill,
stroke: data.paths[p].stroke,
'stroke-width': data.paths[p].stroke_width
});
}
});
// remove the span
$(this).remove();
});
};
})(jQuery);
chamar todas as páginas com SVGs
$.fn.render_raphaels({ span_id: 'svg' });
Outras dicas
Você tentou svgweb?
Caso não haja suporte nativo, um plugin flash será acionado para renderizar o SVG.