Как сделать svg отзывчивым

Question

Я пытаюсь сделать этот массивный svg отзывчивым. Однако это не работает, и я не знаю, почему.

Я попробовал следующее: - установочная ширина: 100% высота: авто (диаграмма исчезла, как только я удалил заданную ширину/высоту в пикселе, независимо от того, что я положил обратно) - используя атрибут viewbox, как предложено https://css-tricks.com/scale-svg/

Вот код (да, я знаю, что это огромная, почему мне нужно, чтобы подогнать его к 100% ширины.): http://www.cssdesk.com/bsakG

Может кто-нибудь дать мне подсказку относительно того, что я делаю неправильно? Я пробовал много вещей, предложенных другими статьями, но, похоже, я сталкиваюсь с той же проблемой, когда, если я избавлюсь от фиксированной высоты/ширины, все исчезнет.

(и да, я знаю, этот вопрос, возможно, было предложено раньше, но ни один из ответов не решить мою проблему)

Answer 1

Вопреки предположениям в комментариях, отлично использовать значения длины, указанные в процентах. Спецификация охватывает details в разделе основных типов данных.

Объединяя эти знания с подсказками из статьи вы связаны в вашем вопросе вы могли бы в конечном итоге с чем-то вроде следующего за отзывчивым макета:

<svg viewbox="0 0 3840 7000" width="100%" height="100%" preserveAspectRatio="xMinYMin meet"> 

Answer 2

Я не смог найти что-нибудь родное для SVG, которые могли бы помочь вам (я пробовал возиться с viewBox и preserveAspectRatio, но не имели большого успеха). Я уверен, что должен быть какой-то способ, но я мог бы что-то посмотреть. Если у кого-то есть лучшее решение, отправьте его!

У меня был подход JavaScript, поэтому я решил поделиться им. В этой демонстрации я буду использовать jQuery, но все это можно сделать с помощью ванильного JavaScript, если вы не можете использовать jQuery.

JavaScript:

$(function(){ 
    scaleSVG(); 
}); 

function scaleSVG(){ 
    var window_width = $(window).width(), 
     $svg = $('svg'), 
     ratio = window_width/$svg.width(); 

    $svg.css('min-width', window_width); 
    $('g:first-child', $svg).attr('transform', 'scale(' + ratio + ')'); 
}; 

Я сделал скрипку этот подход записи демо here (это может занять второе, чтобы загрузить из-за размера SVG).

Вы могли бы, вероятно, также прилагается эта scaleSVG() функция окна размер события, как это:

$(function(){ 
    $(window).on('resize', scaleSVG); 
}); 

я не смог получить эту работу в скрипке, но я имею в виду его потому, что из среда скрипки может быть ???