Seems like SVG can draw an arc easily -- can VML do it on IE 7 and up?

The following can draw two arcs easily using SVG, and i开发者_运维百科t works on Firefox or Chrome:

sample page: http://jsfiddle.net/j8aN9/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80">

<path fill="none" stroke="#41b419" d="M40,5A35,35,0,1,1,5,40.00000000000001" style="stroke-width: 10px; " stroke-width="10"></path>

<path fill="none" stroke="#b5e5a5" d="M5,40.00000000000001A35,35,0,0,1,39.999999999999986,5" style="stroke-width: 10px; " stroke-width="10"></path>

</svg>

can VML do that easily too, so that it works even on IE 7 and up? (can you give an example of drawing such arc like above?)

The VML equivalent would be something like:

<?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" />
<rvml:group style="POSITION: absolute; WIDTH: 1000px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" class=rvml coordsize = "10000,10000">
    <rvml:shape style="WIDTH: 1000px; HEIGHT: 1000px" class=rvml coordsize = "1000,1000" filled = "f" stroked = "t" strokecolor = "#41b419" strokeweight = "7.5pt" path = " m400,50 c669,50,838,342,703,575,568,808,232,808,97,575,66,522,50,461,50,400 e">
      <rvml:fill class=rvml></rvml:fill>
      <rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke>
    </rvml:shape>
</rvml:group>
<rvml:group style="POSITION: absolute; WIDTH: 1000px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" class=rvml coordsize = "10000,10000">
    <rvml:shape style="WIDTH: 1000px; HEIGHT: 1000px" class=rvml coordsize = "1000,1000" filled = "f" stroked = "t" strokecolor = "#b5e5a5" strokeweight = "7.5pt" path = " m50,400 c50,207,207,50,400,50 e">
      <rvml:fill class=rvml></rvml:fill>
      <rvml:stroke class=rvml opacity = "1" miterlimit = "8"></rvml:stroke>
    </rvml:shape>
</rvml:group>

But I discovered this by using Raphaël to draw the shape and then getting the markup with developer tools:

var paper = Raphael(document.getElementById("drawing"), 80, 80);
var c1 = paper.path("M40,5A35,35,0,1,1,5,40.00000000000001");
c1.attr({
    fill: "none",
    "stroke": "#41b419",
    "stroke-width": "10"
});
var c2 = paper.path("M5,40.00000000000001A35,35,0,0,1,39.999999999999986,5");
c2.attr({
    fill: "none",
    "stroke": "#b5e5a5",
    "stroke-width": "10"
});

Using Raphaël might be a better approach all round if you need to support both IE and SVG capable browsers.