使用css，canvas或svg创建流体（缩放）同心圆弧 [英] create fluid (scaling) concentric arcs using css, canvas, or svg
问题描述
我试图创建一个这样的图形：
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调整大小'd真的很喜欢能够使用svg属性，如 viewBox和preserveAspectRatio ，但我还没有看到一个例子来实现这一点。
任何想法？
因为你说你不想使用Javascript库，我假设你提前创建SVG图像和/或在服务器上，并且只是向用户发送静态SVG代码。相比之下，帆布图像总是使用Javascript。
（如果您希望使用Javascript动态创建图形，但不使用库，硬部分将绘制图形， ！）因为@Lars Kotthoff注意到，使用Javascript很容易找出窗口的大小，并相应地缩放一切。）
和向下，您需要在您的SVG元素上包含 viewBox 属性，它会自动缩放。但是，一个警告，动态调整图像大小，同时保持宽高比可能有点令人沮丧。 preserveAspectRatio 属性可防止失真，但只能留下空白空间，而不是按比例缩小。在Firefox中，使用 height：auto; 将导致SVG高度缩小以匹配宽度和viewBox宽高比，但不会在webkit浏览器中。
示例：
http ：//fiddle.jshell.net/9dSbL/
一个有点间接的解决方案是
+将svg的高度设置为可忽略的不为零）量，如1px;
+ set overflow：visible; 在svg上;
+为 preserveAspectRatio 使用切片选项，以便图像缩放到较大的高度或宽度;
+在svg元素上硬编码一个底部填充样式，匹配viewBox的纵横比;
+用 overflow：hidden; 将整个svg包装在< div> p>
此处示例：
http ：//fiddle.jshell.net/9dSbL/1/
I am trying to create a graph like this:
http://bl.ocks.org/cmdoptesc/6228457
or like this
http://raphaeljs.com/polar-clock.html
But I want it to be able to scale (preferably without javascript) according to the browser width. I would love to be able to do this with CSS only, and if not with CSS, preferably without a library like raphael or d3 (though I'll take what I can get). Anybody know how to accomplish this in a way that scales down / up?
UPDATE
I made a JS Fiddle - this is exactly the graph I want:
But I need it to resize. I am using Raphael, and I read about SVG resizing here:
http://bertanguven.com/?tag=raphael-js
and here:
http://www.justinmccandless.com/blog/Making+Sense+of+SVG+viewBox%27s+Madness
but I don't want to have to resize with JS - I'd really like to be able to do this with svg properties such as viewBox and preserveAspectRatio, but I still haven't seen an example that accomplishes this.
Any ideas?
Since you say you don't want to use Javascript libraries, I assume you are creating the SVG image ahead of time and/or on the server, and are just transmitting static SVG code to the user. Canvas images, in contrast, are always made with Javascript.
(If you want to dynamically create the graph with Javascript, but not use a library, the hard part will be drawing the graph, not getting it to resize! As @Lars Kotthoff notes, with Javascript it is easy to find out the size of the window and scale everything accordingly.)
To make SVG scale up and down, you need to include a viewBox attribute on your SVG element, and it will scale automatically. A warning, though, that sizing the image dynamically while maintaining aspect ratio can be a bit frustrating. The preserveAspectRatio attribute prevents distortion, but only by leaving empty space, not by scaling down. In Firefox, using height:auto; will cause the SVG height to scale down to match the width and viewBox aspect ratio, but not in webkit browsers.
Example here:
http://fiddle.jshell.net/9dSbL/
A somewhat indirect solution is to
+ Set the svg height to a negligible (but not zero) amount, such as 1px;
+ Set overflow:visible; on the svg;
+ Use a slice option for preserveAspectRatio, so that the image scales to the larger dimension of height or width;
+ Hard-code a bottom padding style on the svg element that matches the aspect ratio of the viewBox;
+ Wrap the entire svg in a <div> with style overflow:hidden;.
Example here:
http://fiddle.jshell.net/9dSbL/1/
这篇关于使用css，canvas或svg创建流体（缩放）同心圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
