使用 css、canvas 或 svg 创建流体（缩放）同心圆弧

Question

我正在尝试创建这样的图表：

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

或者像这样

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

但我希望它能够根据浏览器宽度进行缩放（最好不使用 javascript）。我希望能够仅使用 CSS 来做到这一点，如果不使用 CSS，最好没有像 raphael 或 d3 这样的库（尽管我会尽我所能）。有谁知道如何以缩小/放大的方式实现这一目标？

更新

我做了一个 JS Fiddle - 这正是我想要的图表：

http://jsfiddle.net/Q9hb5/

但我需要它来调整大小。我正在使用 Raphael，我在这里阅读了有关 SVG 调整大小的信息：

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

这里：

http://www.justinmccandless.com/blog/Making+Sense+of+SVG+viewBox%27s+Madness

但我不想用 JS 调整大小 - 我真的很想能够用 svg 属性（例如 viewBox and preserveAspectRatio）来做到这一点，但我仍然没有看到实现这一点的示例。

有什么想法吗？

Answer 1

既然您说您不想使用 Javascript 库，我假设您正在提前和/或在服务器上创建 SVG 图像，并且只是将静态 SVG 代码传输给用户。相比之下，画布图像总是使用 Javascript 制作的。

（如果您想使用 Javascript 动态创建图表，但不使用库，那么困难的部分将是绘制图表，而不是调整大小！正如 @Lars Kotthoff 所说，使用 Javascript 很容易找出窗口的大小并相应地缩放所有内容。）

要使 SVG 放大和缩小，您需要在 SVG 元素中包含 viewBox 属性，它会自动缩放。但是，在保持纵横比的同时动态调整图像大小可能有点令人沮丧。 preserveAspectRatio 属性可以防止失真，但只能通过留出空白空间，而不是按比例缩小。在 Firefox 中，使用 height:auto; 将导致 SVG 高度按比例缩小以匹配宽度和 viewBox 纵横比，但在 webkit 浏览器中不会。

此处示例：
http://fiddle.jshell.net/9dSbL/

一个有点间接的解决方案是 + 将 svg 高度设置为可忽略不计（但不为零）的量，例如 1px； +在svg上设置overflow:visible;； + 为preserveAspectRatio 使用slice 选项，以便图像缩放到更大的高度或宽度尺寸； + 在 svg 元素上硬编码与 viewBox 的纵横比相匹配的底部填充样式； + 将整个 svg 包裹在 <div> 中，样式为 overflow:hidden;。

此处示例：
http://fiddle.jshell.net/9dSbL/1/