0

以下は、SVG を使用して簡単に 2 つの円弧を描くことができ、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>

IE 7以降でも動作するように、VMLでも簡単に実行できますか? （上記のような弧を描く例を挙げていただけますか？）

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 に答える