0

The following can draw two arcs easily using SVG, and it 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?)

nonopolarity
  • 146,324
  • 131
  • 460
  • 740

1 Answers1

1

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.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • so using Raphael, we can really draw an Arc... and that's by using simple path like the above? I was following some example on StackOverflow that has one MoveTo and tons of LineTo, to achieve the effect of an arc -- drawing tons of lines to simulate a part of the circle. – nonopolarity Apr 19 '11 at 12:18
  • how do you get the VML like that? and how do you make the VML into a page by itself? I put your Raphael code into a page and it really works on IE 7 and 8. But using Firebug Lite, I can't get the VML like you did, how do you get them? http://www.topics2look.com/code-examples/VML/arc-by-raphael-and-firebug-lite.html and http://www.topics2look.com/code-examples/VML/arc-by-raphael.html – nonopolarity Apr 19 '11 at 12:50
  • @動靜能量 I used the developer tools in IE8 (hit F12), selected the parent node in the DOM inspector and selected 'Copy InnerHTML'. I believe the Raphaël `LineTo` and `MoveTo` methods are really just a layer over `path`. – robertc Apr 19 '11 at 13:46
  • oh the other solution just use Path too... but have one move to and tons of line to: http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js – nonopolarity Apr 19 '11 at 14:17