javascriptでsvg属性を変更しても効果がありません

サイズ変更可能にするためにjavascriptでsvgタグを変更しようとしていますが、変更しても効果はありません。私はこれを行う必要がある理由は、このタグは私が変更することができないライブラリによってレンダリングされているので、私の唯一の選択は、javascriptでsvgを変更することだと思われる。javascriptでsvg属性を変更しても効果がありません

私は新しいHTML文書にタグをコピーできるので、このスクリプトが生成するタグが正しいことを知っています。（それはサンプルコードに含まれています） svgが変更されたことを認識させる（またはsvgを変更する別の方法）ようにします。

ここに私の問題を示してHTMLページです：

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var svg = $('#testsvg').find('svg')[0]; 

      var w = svg.getAttribute('width').replace('px', ''); 
      var h = svg.getAttribute('height').replace('px', ''); 

      svg.removeAttribute('width'); 
      svg.removeAttribute('height'); 

      svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h); 
      svg.setAttribute('preserveaspectratio', 'xminymin meet') 

      $(svg) 
       .css('width', '100%') 
       .css('height', '100%') 
       .css('background-color', 'white'); 
     }); 
     </script> 
    </head> 
    <body style="background-color: #333;"> 
     <div style="width: 80%; height: 40%;"> 
      <svg id="resultsvg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%; height: 100%; background-color: white; " viewbox="0 0 100 100" preserveaspectratio="xminymin meet"> 
       <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle> 
      </svg> 
     </div> 
     <div id="testsvg" style="width: 80%; height: 40%;"> 
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"> 
       <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> 
      </svg> 
     </div> 
    </body> 
</html>

出典

2012-06-11 Nocklas

SVGはそう

svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h); 
svg.setAttribute('preserveaspectratio', 'xminymin meet')

が<svg>要素に

svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h); 
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet')

幅と高さをしている書かれるべき大文字と小文字が区別されますスタイルとは違って（HTMLとは異なり）、setAttribute('width', '100%')ではなく.css('width', '100%')

出典

2012-06-11 05:10:10

+16

仲間のgooglerの場合：jQuery要素からDOM要素を取得するには 'find（ 'svg'）の後に' [0] 'を書きます。これは 'setAttribute（）'の使用を有効にするために重要です。 SVG DOMがHTML DOMと異なるため、jQuery 'attr（）'メソッドを使用できません（cf. http://keith-wood.name/svg.html#dom参照） – Offirmo

これは、使用していない場合にのみ当てはまりますJQuery SVG（おそらく）。リンク先に記載されています。 SVG DOMは、jQueryが設計されたHTML DOMとは異なります。したがって、クラスで動作するjQueryの関数は、SVGノードでは機能しません。この問題を解決するには、jQuery SVG DOM拡張を使用します。ページの頭の部分に拡張子を追加します。 SVGの問題でこれを使用できない理由はわかりませんが、JquerySVGには埋め込まれている可能性がありますが、少し編集すればよいことは分かっています:) – XaolingBao

jQuery小文字に属性名を変換します。たとえば、viewBox属性を設定する代わりに、viewboxと設定します。残念ながら、SVG（XMLダイアレクト）要素の属性名では大文字と小文字が区別されます。

あなたは一貫してjQueryのを使用したい場合は、大文字と小文字を区別属性処理するために$.attrHooksを使用することができます。el.attr('viewBox', null)が失敗したということ

['preserveAspectRatio', 'viewBox'].forEach(function(k) { 
    // jQuery converts the attribute name to lowercase before 
    // looking for the hook. 
    $.attrHooks[k.toLowerCase()] = { 
    set: function(el, value) { 
     if (value) { 
     el.setAttribute(k, value); 
     } else { 
     el.removeAttribute(k, value); 
     } 
     return true; 
    }, 
    get: function(el) { 
     return el.getAttribute(k); 
    }, 
    }; 
}); 

$(document).ready(function() { 
    var svg = $('#testsvg'); 
    var w = svg.attr('width').replace('px', ''); 
    var h = svg.attr('height').replace('px', ''); 

    svg.attr({ 
    width: '100%', 
    height: '100%', 
    viewBox: [0, 0, w, h].join(' '), 
    preserveAspectRatio: 'xMidYMid meet' 
    }) 
});

は注意を。フックセッターは呼び出されません。代わりにel.removeAttr('viewBox')またはel.attr('viewBox', false)を使用してください。

ストロークのような他の属性については、それらをスタイルシートに入れます。

svg { 
    background-color: white; 
} 
circle { 
    fill: red; 
    stroke: black; 
    stroke-width: 1px; 
}

あなたが特定の要素のスタイルを変更する/トグルクラスを追加する必要がある場合、あなたはjQueryの1.12+やjqueryの2.2以降を使用する必要があります。

出典

2015-03-06 00:40:51 Dinoboff

javascriptでsvg属性を変更しても効果がありません

答えて

関連する問題