создать жидкость (масштабирование) концентрические дуги с помощью CSS, холста или SVG

Question

Я пытаюсь создать график так:

http://bl.ocks.org/cmdoptesc/6228457

или как этот

http://raphaeljs.com/polar-clock.html

Но я хотите, чтобы он мог масштабироваться (желательно без javascript) в соответствии с шириной браузера. Я хотел бы иметь возможность делать это только с помощью CSS, а если не с CSS, желательно без библиотеки, например, raphael или d3 (хотя я возьму то, что смогу получить). Кто-нибудь знает, как добиться этого таким образом, чтобы он уменьшался/уменьшался?

UPDATE

Я сделал JS скрипку - это именно граф Я хочу:

http://jsfiddle.net/Q9hb5/

Но мне нужно, чтобы изменить размер. Я использую Рафаэль, и я прочитал о SVG изменение размера здесь:

http://bertanguven.com/?tag=raphael-js

и здесь:

, но я не хочу, чтобы изменить размер с JS - Я бы действительно нравится иметь возможность делать это с помощью svg-свойств, таких как viewBox and preserveAspectRatio, но я до сих пор не видел примера, который выполняет это.

Любые идеи?

Answer 1

Поскольку вы говорите, что не хотите использовать библиотеки Javascript, я предполагаю, что вы создаете изображение SVG раньше времени и/или на сервере и просто передаете статический код SVG пользователю. Изображения холста, напротив, всегда создаются с помощью Javascript.

(Если вы хотите динамически создавать график с помощью Javascript, но не использовать библиотеку, то жесткая часть будет рисовать график, а не изменять его размер. Как отмечает @Lars Kotthoff, с Javascript легко узнать размер окна и масштабировать все соответственно.)

Чтобы увеличить масштаб SVG, необходимо добавить атрибут viewBox на свой элемент SVG, и он автоматически масштабируется. Однако предупреждение о том, что калибровка изображения динамически при сохранении пропорций может немного расстраивать. Атрибут preserveAspectRatio предотвращает искажение, но только пустым пространством, а не уменьшением. В Firefox использование height:auto; приведет к уменьшению масштаба SVG в соответствии с шириной и отношением к формату viewBox, но не в браузерах webkit.

Пример здесь:
http://fiddle.jshell.net/9dSbL/

Несколько косвенным решением является + Установить высоту SVG до незначительного (но не равно нулю) суммы, например, 1px; + Комплект overflow:visible; на svg; + Используйте опцию slice для preserveAspectRatio, чтобы изображение масштабировалось до большего размера по высоте или ширине; + Жесткий код нижнего стиля прокладки на элементе svg, который соответствует соотношению сторон viewBox; + Оберните весь svg в <div> со стилем overflow:hidden;.

Пример здесь:
http://fiddle.jshell.net/9dSbL/1/