Question

我有一个身高未知的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>

Answer 1

如果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>

Answer 2

另一种方法是执行类似于上面的JS但是设置viewBox（注意，而不是viewbox！）而不是来自JS的width和height来自getBBox()致电。然后使用preserveAspectRatio="xMidYMid meet"或类似内容。

https://jsfiddle.net/t88pLgbb/4/

Answer 3

受托马斯回答的启发，这是我的做法：

if (true) {
  let svg = document.getElementById("bleh");
  let bb = svg.getBBox();
  svg.setAttribute("width", bb.width);
  svg.setAttribute("height", bb.height);
  svg.setAttribute("transform",
    "translate(-" + bb.width / 2 + ",-" + bb.height / 2 + ") \
    scale(" + 600 / bb.width + "," + 250 / bb.height + ") \
    translate(" + bb.width / 2 + "," + bb.height / 2 + ")");
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div style="width: 600px; height: 250px; border: 1px solid blue;">
  <svg id="bleh">
    <path d="M0 0 T100 400 T500 500 T800 200 T0 0" fill="purple" opacity="0.8" />
    <path d="M0 0 L100 400 L500 500 L800 200 L0 0" fill="none" stroke="black" stroke-width="2" />
  </svg>
</div>

</body>
</html>

目标：尝试将整个SVG图形自动拟合到尺寸为600 * 250的div中。

基本上，我要做的是获得SVG形成后的宽度和高度，将其左右平移50％，然后根据600 * 250 div和SVG图之间的宽高比进行缩放尺寸，然后将其左右平移50％。这样，在我缩放时它就保持居中。（似乎不太喜欢这种实际百分比...）

自动调整SVG？

3 个答案: