25

HTMLファイルに直接配置されたSVGを使用しています

<svg>
   Contents...
</svg>

javascript/jQueryを使用してSVGに属性を追加したい

$("svg").attr("viewBox", "0 0 166 361");

上記のスクリプトを実行した後に変更されたSVGは次のとおりです

<svg viewbox="0 0 166 361">
   Contents...
</svg>

viewBoxではなくviewboxを配置することに注意してください。viewbox（小文字）は何もしないので、viewBox（キャメルケース）である必要があります

何か案は？

** アップデート **

サーバー側からviewBox属性をレンダリングする小さなテストを実行してから、上記のスクリプトを実行しました。あなたはそれを見ることができます1.サーバー側からレンダリングされたとき、それは大丈夫です。2. jQueryはcamelCaseviewBox属性を認識せず、すべて小文字で別の属性を挿入しました。

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
     height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332">
...
</svg>
4

3 に答える 3

24

エンコーディングドキュメントの種類によって異なる場合があります。 XHTMLドキュメントでは、すべてのHTML要素と属性名に小文字を使用する必要があります。HTMLについてはよくわかりません。

アップデート2

私が見つけた唯一の解決策は、以下を使用することです。

$("svg")[0].setAttribute("viewBox", "0 0 166 361");

アップデート

なんらかの理由で説明できません。JsFiddleは常にXHTMLを使用しているため（boo！）、自分のホストでテストしました。いずれの場合も小文字でしたが、FF、Chrome、IE9のSVG要素でした（SVGがわからないので、有効かどうかはわかりません）。

Firefoxの例 Chromeの例 IEの例

于 2012-04-30T20:53:17.480 に答える
4

htmlは大文字と小文字を区別せず、xhtmlタグと属性は小文字にする必要があるため、jQueryは属性名を小文字に変換します。xmlは大文字と小文字を区別するため、SVGのようにキャメルケースの属性名を使用する場合、埋め込みxml言語では問題になります。

jQueryフックを使用して、ケースを変換しないようにする属性名を処理できます。jQueryが設定されていることがわかった場合、jQueryはjQuery.attrHooks[attributename].set それを使用して属性を設定します。属性jQuery.attrHooks[attributename].get値を取得しようとする場合も同様です。例えば：

['preserveAspectRatio', 'viewBox'].forEach(function(k) {
  $.attrHooks[k.toLowerCase()] = {
    set: function(el, value) {
      el.setAttribute(k, value);
      return true; // return true if it could handle it.
    },
    get: function(el) {
      return el.getAttribute(k);
    },
  };
});

これで、jQueryはセッター/ゲッターを使用してこれらの属性を操作します。

注：el.attr('viewBox', null)失敗します。フックセッターは呼び出されません。代わりに、el.removeAttr（'viewBox'）を使用する必要があります。

于 2015-03-05T11:27:29.380 に答える
2

http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

jQueryは、それらがすべての属性名をtoLowerすることを認識しますが、SVGに関連するバグは無視されるため、例外を作成したり、この行を削除したりする必要はありません（toLowerは私の意見では不要です）。

于 2012-12-23T21:29:40.643 に答える