时间戳

首页 > 解决方案 > 嵌套 SVG 会导致意外调整大小

html - 嵌套 SVG 会导致意外调整大小

问题描述

我正在尝试使用嵌套的内联 SVG，以便在 svg 容器中灵活地排列较小的 svg 图像。但是，我很难理解嵌套 SVG 大小的规则。

svg {
  display: block;
}

为什么这会正确显示 200 像素 x 200 像素的红色正方形：

<svg width="200px" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="red" />
</svg>

但是为什么包裹在另一个 svg 元素中会导致正方形变成 150 像素 x 150 像素？
例如：

<svg>
  <svg width="200px" viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

或者：

<svg width="200px">
  <svg width="200px" viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

或者： 

<svg width="200px">
  <svg viewBox="0 0 100 100">
    <rect width="100" height="100" fill="red" />
  </svg>
</svg>

标签： htmlcsssvg

解决方案

您可以更改每个连续的width和，但确保每次都保持相同的和每个嵌套的父级。height<rect>widthviewbox<svg>

工作示例：

<svg width="200px" viewBox="0 0 200 200">

  <rect width="200" height="200" fill="red" />
  
  <svg width="200px" viewBox="0 0 200 200">
  
    <rect width="100" height="100" fill="yellow" />
  
    <svg width="200px" viewBox="0 0 200 200">
    
      <rect width="50" height="50" fill="red" />
    
      <svg width="200px" viewBox="0 0 200 200">
      
        <rect width="25" height="25" fill="yellow" />
      
        <svg width="200px" viewBox="0 0 200 200">

          <rect width="12.5" height="12.5" fill="red" />

        </svg>
      </svg>
    </svg>
  </svg>
</svg>

推荐阅读