2

Raphael を使い始めたばかりですが、ScaleRaphael で複数のキャンバスを作成することが正しくありません
(レスポンシブ後にサイトを作成するためにこれを使用しています > そのための代替手段はありますか?

複数の ScaleRaphael キャンバス: http://jsfiddle.net/karo/gMyP5/13/
または全体表示: http://jsfiddle.net/karo/gMyP5/13/embedded/result/
ここで奇妙なことが起こります。
赤い円は 2 番目の div にある必要がありますが、たとえばコードを調べると、. フルビューで firebug を表示すると、両方の svg が内部にあることがわかります。なぜですか?

私に何か考えはありますか？ありがとうカオル

私のコード: HTML

<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>

JavaScript:

var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});


var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});


function resizePaper(){
  var win = $(this);
  paper.changeSize(win.width(), win.height(), true, false);
  paper2.changeSize(win.width(), win.height(), true, false);

}
resizePaper();
$(window).resize(resizePaper);

CSS

#wrapper
{
    position:relative;
}
#paper {
    background-color: lightgray;
    width:100%;
    height:200px;
    position:relative!important;
}
#paper2
{
    background-color: orange;
    width:100%;
    height:100px;
    position:relative!important;
}
svg
{
    position:absolute!important;
    top:0;
    left:0;
}
4

2 に答える 2

0

ScaleRaphael は 1 つのキャンバスのみをサポートします。svggroupコードでは、最初の既存のorvmlgroup要素を再参照していることがわかります。

あなたがしていることをするのにScaleRaphaelは必要ありません。バージョン 2 以降、Raphael には が含まれてPaper.setViewBoxおり、常に含まれてPaper.setSizeいます。

于 2013-04-04T13:13:45.800 に答える
0

問題とそれがどのように機能するかの回避策を見つけました....ここを見てください：http://jsfiddle.net/karo/r4qvt/12/

最初に紙のdiv、次に赤いdivがあります 

       <div id="paper"></div>
       <div id="red"></div>

   </div>
</div>

そして、div「赤」とその中の長方形のredpaperを作成してから、paperGreyを作成して最初のdivに「話しかける」とします。その後、それは動作します

var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});

var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});

私がそれを行うと、逆の方法でそれが機能しなくなります

var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});    

var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});

...奇妙ですが、解決策を見つけました;)

于 2013-04-05T12:10:25.867 に答える