0

以下可以使用 SVG 轻松绘制两条弧线，并且适用于 Firefox 或 Chrome：

示例页面：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 及更高版本上运行吗？（你能举一个像上面这样画弧线的例子吗？）

4

1 回答 1

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绘制形状然后使用开发工具获取标记发现了这一点：

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

如果您需要同时支持支持 IE 和 SVG 的浏览器，那么使用 Raphaël 可能是一个更好的方法。

于 2011-04-19T10:56:21.023 回答