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

我有一个像这样的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检查第二个rect时，它没有宽度和高度。 没有适用的CSS规则。为什么它不受宽度和高度的影响？

最佳答案

它工作正常。

如果该代码段可单独运行，但是代码中包含该代码段的div大小显示为0x0，请查看:Why is my div's height zero

通常是在设置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>

关于javascript - SVG元素的宽度和高度在html中设置，但在检查器中显示为0 0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36946625/