CSS SVG元素的宽度和高度在HTML中设置但在检查器中显示为0 0

在本文中，我们将介绍CSS中SVG元素的宽度和高度设置的问题，以及在浏览器的检查器中为0 0。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

当我们在HTML中使用SVG（可缩放矢量图形）元素时，可能会遇到以下情况：即使我们在HTML代码中明确设置了SVG元素的宽度和高度，但在浏览器的检查器中却显示为0 0。这可能会导致我们无法正确地布局和定位SVG元素。

对此现象的解释是，当使用CSS来设置SVG元素的宽度和高度时，不是直接通过HTML属性来设置的。相反，CSS属性width和height实际上控制的是SVG的视口 (viewbox) 的范围，而不是SVG元素本身。因此，在检查器中显示的宽度和高度值为0 0。

解决方案

要解决此问题，我们需要采取特定的方法设置SVG元素的宽度和高度，并确保它在浏览器的检查器中正确显示。

方法一：使用CSS样式表

我们可以在CSS样式表中使用width和height属性来设置SVG元素的宽度和高度。但是，需要注意的是，在设置width和height之前，我们必须为SVG元素创建一个https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS class或ID，以便将样式应用于它。

.svg-container {
  width: 300px;
  height: 200px;
}

.svg-container svg {
  width: 100%;
  height: 100%;
}

在上面的示例中，我们首先为SVG元素的容器创建了一个https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS class .svg-container，并将它的宽度和高度设置为300px和200px。然后，我们使用CSS选择器 svg-container svg 将100%的宽度和高度应用于SVG元素本身。

方法二：使用内联样式

除了使用CSS样式表，我们还可以直接在HTML元素的style属性中设置SVG元素的宽度和高度。这种方法非常简单方便，不需要使用额外的CSS选择器。

<svg width="300" height="200" style="width:100%; height:100%;">
  <!-- SVG content goes here -->
</svg>

在上面的示例中，我们直接在SVG元素的width和height属性中设置了它的初始宽度和高度为300和200，并在内联style属性中设置了100%的宽度和高度。

方法三：使用JavaScript

如果需要在动态条件下设置SVG元素的宽度和高度，我们可以使用JavaScript来实现。通过使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript，我们可以在运行时获取和修改SVG元素的宽度和高度。

const svgElement = document.querySelector('svg');
svgElement.setAttribute('width', '300');
svgElement.setAttribute('height', '200');

在上面的示例中，我们首先通过JavaScript选择器获取了SVG元素，然后使用setAttribute方法将宽度和高度设置为300和200。

示例

为了更好地理解和演示上述解决方案，我们将创建一个简单的示例。以下是HTML代码：

<div class="svg-container">
  <svg width="300" height="200" style="width:100%; height:100%;">
    <rect width="100%" height="100%" fill="blue" />
  </svg>
</div>

在上面的代码中，我们首先创建了一个SVG元素的容器div，并应用了CSS class .svg-container。然后，在SVG元素内部，我们创建了一个填充为蓝色的矩形，其宽度和高度设置为100%。

接下来，我们将在CSS样式表中添加以下样式：

.svg-container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.svg-container svg {
  width: 100%;
  height: 100%;
}

在上述代码中，我们为SVG容器设置了一个宽度和高度为300px和200px，并添加了一个黑色的边框。然后，我们将100%的宽度和高度应用于SVG元素本身。

最后，在浏览器中打开此示例，我们将看到SVG元素在视觉上显示为300px x 200px的尺寸，并且在检查器中显示的宽度和高度值不再是0 0。

总结

通过以上解决方案，我们可以成功地设置SVG元素的宽度和高度，并确保在浏览器的检查器中正确显示。使用CSS样式表或内联样式可以很容易地设置SVG元素的宽度和高度，而使用JavaScript则可以在运行时进行动态设置。我们应根据具体需求选择适合的方法，并在实际开发中应用它们。