0

私は SVG と RAPHAEL JavaScript が初めてです。

RAPHAEL で棒グラフを作成しています。棒グラフの背景が「剥がれています」。現在、棒グラフは「SVG」の「パス」にレンダリングされています。私によると、正確なルックアンドフィールを実現するには、次の2つの方法があります。

1)パスの背景をコーディングする必要があります。または2）パス全体で繰り返す必要がある背景画像を提供する必要があります。

最初のアプローチをコーディングできませんでした。

だから、ここに私の2番目のアプローチがあります：

$("#first_graph") に "r1" 棒グラフを作成中です。棒グラフの背景をカスタマイズしたい.それを達成するために、グラフセクションを担当するパスを選択し、背景のフロントパターンを設定しました.

スクリプト部分:

r1.hbarchart(0, 0, 650, 90, [base_array_1, calc_array_1], {colors: ["#278bd1","#052f4d"],stacked: true}).hover(fin, fout);

$("#first_graph").find("path:odd").attr({ fill: "url(#image)",

});

パターン部分.... HTML で宣言:

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>

<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
 <image xlink:href="../images/sub_chart_blue_bg.png" width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
      </defs>
    </svg>

さて、問題...私が直面している（2番目のアプローチで）ことは次のとおりです。

画像はストレッチ中です。

グラフのストリップされた背景（svgのパス）を作成するためのアプローチを1つ提供して、私を助けてください。

4

1 に答える 1

0

これを行う方法は次のとおりです。あなたのものがうまくいかない理由がわからない。

あなたの質問に答えるために、 「パスの「剥がれた背景画像」を作成するのを手伝ってくれる人はいますか。デモを見る

var p = Raphael('notepad',500,500);
var pad = p.path("M25.221,1.417H6.11c-0.865,0-1.566,0.702-1.566,1.566v25.313c0,0.865,0.701,1.565,1.566,1.565h19.111c0.865,0,1.565-0.7,1.565-1.565V2.984C26.787,2.119,26.087,1.417,25.221,1.417zM15.666,29.299c-0.346,0-0.626-0.279-0.626-0.625s0.281-0.627,0.626-0.627c0.346,0,0.627,0.281,0.627,0.627S16.012,29.299,15.666,29.299zM24.376,26.855c0,0.174-0.142,0.312-0.313,0.312H7.27c-0.173,0-0.313-0.142-0.313-0.312V4.3c0-0.173,0.14-0.313,0.313-0.313h16.792c0.172,0,0.312,0.14,0.312,0.313L24.376,26.855L24.376,26.855z");

pad.transform("t200,200");
pad.scale(10);
pad.attr({fill:'url("http://www.zingerbug.com/Backgrounds/background_images/gray_diagonal_stripes_seamless_background_pattern.jpg")'});

ここに画像の説明を入力

画像が大きいか解像度が高い可能性が高いため、画像が引き伸ばされます。元の画像に近づけるには、パスのサイズに合わせて画像のサイズを変更し、それを背景として使用する必要があります。それはあなたの問題を解決するはずだと思います。

于 2013-08-26T15:51:29.047 に答える