SVG처럼 호를 쉽게 그릴 수 있습니다 - VML은 IE 7 이상에서 할 수 있습니까?

Question

하면 쉽게 SVG를 사용하여 두 개의 호를 그릴 수 있습니다 다음, 그것은 파이어 폭스 나 크롬에서 작동 :

샘플 페이지 : 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> 

수 VML 할 것을 너무 쉽게, 그것은 IE 7에서도 작동하도록 그리고 위로?

Answer 1

VML에 해당 될 것 같은 (? 당신은 위와 같이 아크를 그리는 예제를 제공 할 수 있습니다) :

<?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> 

을하지만 난 마크 업을 받고 도형을 그릴 Raphaël를 사용하여이를 발견 개발자 도구 : 당신이 모두 IE와 SVG 수있는 브라우저를 지원해야하는 경우 라파엘 모든 라운드 더 나은 방법이 될 수 있습니다 사용

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" 
}); 

.