javascript – 在html中设置的SVG元素宽度和高度,但在检查器中显示为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检查第二个矩形时,它没有宽度和高度. 没有适用于它的CSS规则.为什么它不受宽度和高度的影响？

解决方法

它工作正常.

如果代码段单独工作,但代码中包含它的div的大小显示为0x0,则查看：Why is my div’s height zero

它通常在设置浮动时引起.

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

原文地址：https://www.jb51.cc/js/157396.html