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

Question

我有一个像这样的svg rect:

<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">

Answer 2

效果很好。

如果代码片段单独工作，但代码中包含它的 div 大小显示为 0x0，那么请查看：为什么我的 div 高度为零

它通常是在float设置时引起的。

<div>
  <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>
</div>