javascript - SVG 元素宽度和高度在 html 中设置但在检查器中显示为 0 0

Question

我有一个像这样的 svg 矩形:

<svg class="legend-square">
  <defs>
    <pattern id="pattern1" width="3"
     height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)">
      <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect>
    </pattern>
  </defs>
  <rect width="12" height="12" fill="url(#pattern1)"></rect>
</svg>

当我用 Chrome 检查第二个矩形时，它没有宽度和高度。 没有适用于它的 CSS 规则。为什么它不受宽度和高度的影响？

Answer 1

SVG 文件在前端呈现为零高度和宽度的原因之一是缺少 <svg>标记属性“高度”和“宽度”。

不正确:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 30">

正确:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 30" width="49" height="30">