13

svgタグをjavascriptで変更してサイズを変更しようとしていますが、変更しても効果がありません。これを行う必要がある理由は、このタグが変更できないライブラリによってレンダリングされるためです。したがって、私の唯一の選択肢は、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>
4

2 に答える 2

25

SVGは大文字と小文字を区別するため、

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

書く必要があります

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

要素の幅と高さ<svg>は属性であり、スタイルではないため（htmlとは異なり）、setAttribute('width', '100%')ではなくを使用する必要があります.css('width', '100%')

于 2012-06-11T05:10:10.977 に答える
7

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

jQueryを一貫して使用したい場合は$.attrHooks、大文字と小文字を区別する属性を処理するために使用できます。

['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.attr('viewBox', null)失敗することに注意してください。フックセッターは呼び出されません。代わりに、el.removeAttr('viewBox')またはを使用する必要がありますel.attr('viewBox', false)。

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

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

特定の要素のスタイルを変更するためにクラスを追加/切り替える必要がある場合は、jQuery1.12+またはjquery2.2+を使用する必要があります。

于 2015-03-06T00:40:51.297 に答える