13

ここにコードのデモがあります

高さが不明な SVG があります。json を読み込んで javascript+math を使用すると、それを理解できますが、動的にサイズを変更するために使用できる css はありますか?

CSS:

svg {
  width: 500px;
  height: 9000px;
}
.tabme {
  border:3px solid red;
  height: 200px;
   overflow:scroll;
}

html:

<div class="tabme">
  <div id="Chart">
    <div class="chartbody" />
    <svg>
      <rect width="190" y="0" height="16" x="175" />
      <rect width="190" y="20" height="16" x="175" />
      <rect width="190" y="40" height="16" x="175" />
      <rect width="190" y="60" height="16" x="175" />
      <rect width="190" y="80" height="16" x="175" />
      <rect width="190" y="100" height="16" x="175" />
      <rect width="190" y="120" height="16" x="175" />
      <rect width="190" y="140" height="16" x="175" />
      <rect width="190" y="160" height="16" x="175" />
      <rect width="190" y="180" height="16" x="175" />
      <rect width="190" y="200" height="16" x="175" />
      <rect width="190" y="220" height="16" x="175" />
      <rect width="190" y="240" height="16" x="175" />
      <rect width="190" y="260" height="16" x="175" />
      <rect width="190" y="280" height="16" x="175" />
      <rect width="190" y="300" height="16" x="175" />
    </svg>
  </div>
</div>
4

3 に答える 3

18

SVG 要素に幅と高さの属性がない場合、Robert Longson が指摘したように、CSS 仕様に従って幅/高さを計算する必要があります。ただし、これらの値は SVG のコンテンツの適切なサイズを反映しません。次を使用して、適切な寸法と配置を見つけることができますgetBBox()。

// Javascript to run after document load
var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
svg.setAttribute("width", bbox.width + "px");
svg.setAttribute("height", bbox.height + "px");
svg.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: red">
  <rect x="30" y="40" width="50" height="60"/>
</svg>

于 2013-01-16T17:09:54.563 に答える