css – 自动调整SVG？

这是一个 code demo

我有一个未知高度的SVG.我在加载json并使用javascript数学后可以搞清楚但是有没有我可以用来动态调整大小的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>

解决方法

如果SVG元素没有任何宽度和高度属性,那么宽度/高度应该是 calculated according to the CSS specs,正如Robert Longson所指出的那样.但是,这些值不会反映SVG内容的正确尺寸.你可以使用getBBox()找到合适的宽度/高度：

// Javascript to run after document load
var svg = document.getElementsByTagName("svg")[0];
var bBox = svg.getBBox();
svg.setAttribute("width",bBox.x + bBox.width  + "px");
svg.setAttribute("height",bBox.y + bBox.height + "px");

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="30" y="40" width="50" height="60"/>
</svg>

css – 自动调整SVG？

解决方法

猜你在找的CSS相关文章