我正在尝试创建一个这样的图形：
http://bl.ocks.org/cmdoptesc/6228457
或者像这样
http://raphaeljs.com/polar-clock.html
但我希望它能够根据浏览器宽度进行缩放（最好不使用javascript）。我希望能够只使用CSS，如果没有CSS，最好没有像raphael或d3那样的库（尽管我会采取我能得到的东西）。有人知道如何以缩小/缩小的方式实现这一目标吗？
更新
我做了一个JS小提琴 - 这正是我想要的图形：
但我需要它来调整大小。我正在使用Raphael，我在这里阅读SVG调整大小：
http://bertanguven.com/?tag=raphael-js
在这里：
http://www.justinmccandless.com/blog/Making+Sense+of+SVG+viewBox%27s+Madness
但我不想用JS重新调整大小 - 我真的希望能够使用viewBox and preserveAspectRatio之类的svg属性做到这一点，但我仍然没有看到了一个实现这一目标的例子。
有什么想法吗？
答案 0 :(得分：3)
由于您说您不想使用Javascript库，我假设您提前和/或在服务器上创建SVG图像，并且只是向用户传输静态SVG代码。相反，Canvas图像总是使用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;;
+对slice使用preserveAspectRatio选项，以便图像缩放到较大的高度或宽度尺寸;
+在svg元素上硬编码底部填充样式，该样式与viewBox的宽高比相匹配;
+使用样式<div>将整个svg包裹在overflow:hidden;中。