2012-02-08 8 views
1

Raphael JSのドキュメントには、どのようにmake svgがありますか、左上隅にのみ表示される例があります。divの別の位置から開始するにはどうすればいいですか

//キャンバスを#notepad要素の左上隅
//(またはDIR = "RTL" 要素で、その右上隅)で作成され
VAR 紙=ラファエル(のdocument.getElementById( "notepad")、320,200)。

左上隅からではなく、たとえばx = 0およびy = 50から開始するにはどうすればよいですか?

+0

あなたのsvg要素を#pot要素の50px、left:0の位置にしたいですか?それはあなたがどういう意味ですか? – czerasz

+0

はい、あなたは正しいです:) –

答えて

2

これは、おそらくCSSとSVGについてはあまりありません。コンテナはCSSを使用してHTMLで定義することができますが、その中にSVGデータに直接関連する定義を入れるのが最適です。あなたが値 "xMinYMid会う" をお勧めします、第2の属性に

  • ビューボックス
  • preserveAspectRatio

:この場合に特定のは、これらの属性です。これにより、SVGイメージが使用可能なキャンバスの垂直中央と左端からレンダリングされます。 SVGの幅と高さの属性を削除することもできます。これは、ベクトルグラフィックスのレンダリングに直感的です。

私はスライドショーアプリの3ヶ所に成功裏に統合されたSVGグラフィック、http://mailmarkup.org/slideshow.xhtml

  • フッター
  • SMTPやHTTPでの引用符
  • ロゴの先頭に表示される引用のグラフィックを持っています図中のスライドの途中で

ブラウザウィンドウを縮小または拡大すると、グラフィックスは正しい場所に残り、再成長しますテキストにネイティブです。

+0

ありがとう、私はviewBoxでそれをやった)))) –

-1

はこれを試してみてください:

#notepad { 
    position:relative; 
} 
    #notepad svg { 
    position:absolute; 
    top:50px; left:0; 
    } 
0

は、あなたのSVG、CSSの相対位置の属性を与え、トップ/ボトムおよび左/右、あなたはdivの内側にご希望の場所に応じて、SVGを設定することができます。

<svg id="mSvg" height="539" version="1.1" width="620" xmlns="http://www.w3.org/2000/svg"> 
#msvg { 
overflow: hidden; 
top: 40px; 
left: 100px; 
position: relative; 
} 
関連する問題