0

次の Raphael SVG コードを使用すると、テキストの色を変更できますが、テキスト自体は変更できません。

    function create_Star_Icons(){

        var container = Raphael(feedback_Icons, 500, 70);
        var star_Icons = container.set();

        star_Icons.push(
            container.text(60,32,"Punctuality"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7"),
            container.text(210,32,"Intensity"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7"),
            container.text(380,32,"Enjoyment"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7")
        );

        // formatting

        star_Icons[0].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label                
        star_Icons[1].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[2].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number               
        star_Icons[3].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label
        star_Icons[4].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[5].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number
        star_Icons[6].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label
        star_Icons[7].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[8].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number

        // positioning

        star_Icons[0].transform("t0,0");          // label
        star_Icons[1].transform("t120,20s1.75");  // star
        star_Icons[2].transform("t120,20s1.75");  // number
        star_Icons[3].transform("t0,0");          // label
        star_Icons[4].transform("t280,20s1.75");  // star
        star_Icons[5].transform("t280,20s1.75");  // number
        star_Icons[6].transform("t0,0");          // label
        star_Icons[7].transform("t440,20s1.75");  // star
        star_Icons[8].transform("t440,20s1.75");  // number

        // id's and classess

        star_Icons[1].node.setAttribute("class", "punctuality_Star");
        star_Icons[2].node.setAttribute("class", "punctuality_Num");                
        star_Icons[4].node.setAttribute("class", "intensity_Star"); 
        star_Icons[5].node.setAttribute("class", "intensity_Num");  
        star_Icons[7].node.setAttribute("class", "enjoyment_Star"); 
        star_Icons[8].node.setAttribute("class", "enjoyment_Num");  

    } // create_Star_Icons

次の jquery が使用されています。

                $(".punctuality_Num").attr("fill","#00ffff");   
                $(".punctuality_Num").attr("text","1");

これが更新されない理由はありますか？それがセットに含まれているためであるかどうか、またこれはテキスト要素に別の方法でアクセスする必要があることを意味するかどうか疑問に思っています。

編集 - 重要

言い忘れましたが、Firefox の HTML ビューアーに表示されるテキストは変更されます。しかし、あなたが見るものは変わりません

4

3 に答える 3

3

ラファエルを使い続ける必要があります。

例えば、

  • create_Star_Icons配列を返すように関数を変更できますstar_Icons。

    function create_Star_Icons(){
  ...
  return star_Icons;
}

  • 返された配列の参照をコードに保存します。

    var star_Icons = create_Star_Icons();

  • 要素を変更するために使用します。

    $("selector").click(function(){
  star_Icons[2].attr("text", "1");
});

さらに、コードをリファクタリングして、より適切に動作させることができます。

function create_Star_Icons(){
  var container = Raphael(feedback_Icons, 500, 70);
  var star_Icons = {};

  star_Icons.Punctuality = {
    label: container.text(60,32,"Punctuality"),
    star: container.path("..."),
    number: container.text(17,18,"7")
  };

  ...

  return star_Icons;
}


var star_Icons = create_Star_Icons();


$("selector").click(function(){
  star_Icons.Punctuality.number.attr("text", "1");
});

ここで実行されているリファクタリングされたコードを参照してください。

于 2012-12-28T17:05:10.867 に答える
2

Raphael を使用してテキストを定義し、jQuery を使用して SVG の属性を編集するのは、両方の世界で最悪のように聞こえます...

Raphael を使用してテキストを設定するのは非常に簡単です。

star_Icons[2].attr("text",1);

jsfiddle の例

ラファエルのテキストは毛むくじゃらです。特にInternet Explorer ではおかしくなりがちです。また、多くのブラウザーは SVG テキストを適切に解釈しません。たとえば、選択できないことが多い、アクセシビリティーが優れていないなどです。可能であれば、テキストを通常の div として作成および制御し、jQuery を使用してスタイルを設定し、線を引くことをお勧めします。あなたのラファエルの要素をアップします。

また、jQuery の SVG サポートは優れたものではありません。SVG のサポートが開始されたのはごく最近のことです。しかし、ラファエルはその目的のために設計されています。

また、Raphael は jQuery とは異なります。Raphael オブジェクトをすばやく簡単に検索する方法はありません。Raphael オブジェクトを作成するときは、慎重にファイルする必要があります。必要なときに Raphael オブジェクトを取得できるように、Raphael オブジェクトを整理する方法を前もって計画する必要があります。

あなたの場合、それぞれに名前があり、それらはすべて関連しています。名前でキー付けされたオブジェクトに整理してみませんか? 時間厳守キー、強度​​キーなどを持つオブジェクトを作成し、それぞれにテキスト、スター、ラベル キーを配置し、オブジェクトをループして、すべてを適切なセットに配置します。そうすれば、各オブジェクトを名前で簡単に検索できます。

オブジェクトが、それを操作するすべてのものから見えるスコープ内にあることを確認する必要があります。同様の問題を抱えている人の例を次に示します。

于 2012-12-28T17:06:05.753 に答える
0

テキスト値は、タグ内にある別のタグに保存され<tspan dy="4.5">0</tspan>ます<text>

<text .... ><tspan dy="4.5">0</tspan></text>

SO および他の場所でのさまざまな投稿に従って、推奨される構文は次のとおりです。

 $(".punctuality_Num").attr("text","1");

ただし、これは属性 text="1" をタグに追加する<text>だけなので、タグに表示される値には影響しません<tspan>。

 $(".punctuality_Num").text("1");

これは明らかに<tspan>正しい値を表示しますが、フォーマットを台無しにします。

そう

 $(".punctuality_Num tspan").text("1");

表示された値を更新し、フォーマットを保持します。

于 2012-12-28T16:34:28.027 に答える