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 元素没有任何宽度和高度属性，则应根据 CSS 规范计算宽度/高度，正如 Robert Longson 指出的那样。但是，这些值不会反映 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 回答
3

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

var svg = document.getElementById("x1");
svg.setAttribute("viewBox", "0 0 32 18.4");

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

于 2017-12-12T23:39:33.390 回答
0

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

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%。这样，当我缩放它时它保持居中。（它似乎不喜欢这种方式的实际百分比......）

于 2019-09-26T18:08:48.493 回答