Question

我有棒球钻石的SVG，我正试图通过其父容器的属性来设置它的宽度和高度。

这是我的小提琴：https://jsfiddle.net/a5mz90jy/6/

这是我的Javascript：

const svgBaseballField = document.getElementById('diamond');
  console.log(svgBaseballField);
  const svgContainer = document.getElementsByClassName('svg_container');
  console.log(svgContainer);

  const svgContainerHeight = svgContainer.clientHeight;
  console.log(svgContainerHeight);
  const svgContainerWidth = svgContainer.clientWidth;

  svgBaseballField.setAttribute("width", svgContainerWidth);
  svgBaseballField.setAttribute("height", svgContainerHeight);

  svgBaseballField.setAttribute("viewBox", "0 0 100 100");

我知道出了什么问题，因为svgContainerHeight和svgContainerWidth是未定义的。我也知道我需要将视口设置为某种东西。

我之前也检查了这个： How can I make an svg scale with its parent container?

Answer 1

您要链接的SVG具有固定的width和height（650 x 500），因此您无法按照现在的方式执行此操作（即通过<object>。

您有两种选择：

在本地复制SVG并进行修改。添加viewBox属性并将width和height更改为"100%"。
```
<svg ... width="100%" height="100%" viewBox="0 0 650 500" ... >
```

另一种解决方案是将SVG作为背景图像包含在内，并利用CSS背景大小调整属性。

.svg_container {
  width: 75%;
  height: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg) blue;
  background-repeat: no-repeat;
  background-size: contain;
}

https://jsfiddle.net/a5mz90jy/12/

如何使用JavaScript将SVG扩展到父容器的完整高度和宽度？

1 个答案: