web-dev-qa-db-ja.com

Raphaelオブジェクトにcssクラスを追加する方法

線、長方形、円などの多くのRaphaelオブジェクトを使用するWebページを作成しようとしています。私はこれらのオブジェクトのイベントごとに異なる色を使用しています。たとえば、ある色のマウスオーバー、別の色のオンマウスアウトなどです。したがって、スタイルがたくさんあるので、これらのオブジェクトにcssクラスを指定できるかどうか疑問に思いました。 IEで次のコードを使用してみましたが、スタイリング効果が見られませんでした

rectObj.attr('class','mediumBold');

mediumBoldは、定義されたcssクラスの1つです。

私はこれにかなり慣れていません。どんなポインタも役に立ちます。

ありがとう。

javascriptcssraphael
29
sgbharadwaj

私がそれをしている方法：

var rph = Raphael("target",100,100);

var p = rph.rect(0, 0, 12, 12, 1);

p.node.setAttribute("class","track");
34
Anselmo

まず、私はこのjsツールについて知りませんでした。ひどいですね。ソリューションに戻ると、これを機能させるには、Raphael.jsに変更を加える必要があります。ここでは、圧縮されていないソースファイルを参照しています。行番号78には、 attr（） 関数を使用して設定できるすべての可能な属性をリストするavailableAttrsというプロパティがあります。そのプロパティを変更して、次のようなデフォルト値のクラスを含めます。

availableAttrs = {
    blur: 0, 
   "clip-rect": "0 0 1e9 1e9", 
    cursor: "default", 
    cx: 0, 
    cy: 0,
    fill: "#fff", 
   "fill-opacity": 1, 
    font: '10px "Arial"', 
   "font-family": '"Arial"', 
   "font-size": "10", 
   "font-style": "normal", 
   "font-weight": 400, 
    gradient: 0, 
    height: 0, 
    href: "http://raphaeljs.com/", 
    opacity: 1, 
    path: "M0,0", 
    r: 0, 
    rotation: 0, 
    rx: 0, 
    ry: 0, 
    scale: "1 1", 
    src: "", 
    stroke: "#000", 
   "stroke-dasharray": "", 
   "stroke-linecap": "butt", 
   "stroke-linejoin": "butt", 
   "stroke-miterlimit": 0, 
   "stroke-opacity": 1, 
   "stroke-width": 1, 
    target: "_blank", 
   "text-anchor": "middle", 
    title: "Raphael", 
    translation: "0 0", 
    width: 0, 
    x: 0, 
    y: 0, 
    class:""

}、

この変更が完了すると、attr関数を使用してクラス属性を割り当てることができます。

追伸：スクリプトを変更して使用する前に、ライセンス条項を確認してください。

10
Chandu

すべてのElementインスタンスに単に「addClass」メソッドを追加してみませんか？

このような：

Raphael.el.addClass = function(className) {
    this.node.setAttribute("class", className);
    return this;
};

次に、次のことができます。

rectObj.addClass('mediumBold');
7
fabiangebert

使った

$(rectObj.node).attr("class", "mediumBold");
5
Maxim

Raphaelのattrは、特にSVG用に設計されているため、jQueryのattrとは異なります。私はこれを台無しにせず、さまざまな目的のためにさまざまなライブラリを使用します。 jQueryでrectObjを使用するには、rectObj.nodeを介して実際のDOM要素を取得する必要があります。

$(rectObj.node).addClass("mediumBold");

JQueryを使用していない場合は、次のことができます。

rectObj.node.className += " mediumBold";
5
David Tang

同じ問題が発生しました。具体的には、Raphaelによって作成されたSVGオブジェクトにCSSクラスを割り当てられるようにしたかったのです。これは私がそれを作った方法です：

paper= Raphael("thePaperObj", 200, 10); //create a Raphael Obj
paper.canvas.className.baseVal="stretchBar";

その結果、次のようなレンダリングされたSVG要素が得られます。

<svg class="stretchBar" style="overflow: hidden; position: relative;" width="200" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">

もちろん、クラスは、スタイルシートに必要なCSS属性を含むように定義できます。

これが将来誰かを助けることができることを願っています。

5
eddo

他の誰かがこれに遭遇した場合、RaphaelがSVG固有のものを設定する機能を欠いている理由があります。これは、サブセットの操作を持つベクターグラフィックを作成するためのツールであるためです。 SVGとVMLの共通点。 VMLを使用するとその機能が失われるため、SVG固有の機能で拡張しても意味がありません。もちろんその逆もありますが、SVGはその特定の機能をサポートしていないため、VMLが実行しないことがあるかもしれません。

2
nigeljohnwade