0

プリセット ビューポートを備えた svg ボックスがあります。100%横になるように表示したいです。しかし、何が起こっているかというと、下にスペースが追加されています。どうすればこれを取り除くことができますか? ビューポートと内部コンポーネントのサイズを変更する必要はありませんが (これらは、これらを必要とする他のツールから生成されます)、svg タグの属性 (アスペクト比など) を追加/変更できます。私はフィドルを作りました - http://jsfiddle.net/cyberwombat/2MLwx/1/ - ブラックボックスの周りに赤い境界線を2pxにしたいと思います。preserveAspectRatio のいくつかのバリエーションを試しましたが、今のところうまくいきません。

<!DOCTYPE html>
<head>
<style>
.frame {
    margin:100px 100px 0 100px;
    background-color:yellow;
  }
  .wrapper {
     border:1px solid red;
    padding:2px;
  }
  svg {

  }
  </style>
</head>
<body>
  <div class="frame">
    <div class="wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 150" width="100%" version="1.1">
        <rect transform="matrix(1,0,0,1,0,0)" x="0" y="0" width="100%" height="100%" r="0" rx="0" ry="0" fill="#000" stroke="#000"></rect>
      </svg>
    </div>
      Hello
  </div>

</body>
</html>
4

1 に答える 1

0

JavaScript を使用すると、svg 要素の寸法をビューボックスに変更できます。

var a = document.getElementsByTagName('svg')[0];
var width = parseInt(a.getAttribute("viewBox").split(/\s+/)[2], 10);
var height = parseInt(a.getAttribute("viewBox").split(/\s+/)[3], 10);

a.style.width = width + 'px';
a.style.height = height + 'px';

// You have to update the parent's dimensions too or else it has no idea its
// child changed dimensions
var b = document.getElementsByClassName('wrapper')[0];
var c = document.getElementsByClassName('frame')[0];
b.style.width = (width + 2) + 'px'; // Hard coded values based on your padding
c.style.width = (width + 4) + 'px'; // Hard coded values based on your padding

デモはこちら

ビューボックスが開始されなかった場合は、次0,0のように開始値を差し引いて幅を見つけることができます。

var width = parseInt(a.getAttribute("viewBox").split(/\s+/)[2], 10) 
  - parseInt(a.getAttribute("viewBox").split(/\s+/)[0], 10);
var height = parseInt(a.getAttribute("viewBox").split(/\s+/)[3], 10) 
  - parseInt(a.getAttribute("viewBox").split(/\s+/)[1], 10);

幅のパディングを動的に含めたい場合（パディングを変更する理由はわかりませんが、それは私の問題ではありません）、より複雑になりますが、次のようになります

var containerPadding = parseInt(window.getComputedStyle(containerVar, null).getPropertyValue('padding-left'), 10) 
+  parseInt(window.getComputedStyle(containerVar, null).getPropertyValue('padding-right'), 10);

編集

あなたが理解していないことがわかりました: あなたの問題は CSS のみが原因です。ラッパーまたはフレームの幅/高さを設定しないため、すべてのウィンドウから余白を差し引いて使用しようとします。ラッパーは、デフォルト値から変更しない限り、SVG の高さ/幅に基づいてサイズを変更することはできません

その場合、あなたが提案したように、CSSを使用してフレームとコンテナに必要な寸法を設定するだけです。私はもともと、寸法を動的に変更する必要があると思っていました

于 2013-08-06T22:31:05.603 に答える