html - 为什么将样式移至 CSS 后矩形看起来不一样(或根本不一样)？

Question

粉红色/中间矩形可见。顶部和底部不是，它们的样式已移至外部 CSS 中的类。检查元素在顶部/最右侧显示 1x1 图像？ svg 区域。我不确定为什么在外部 CSS 中使用样式属性会导致矩形无法按预期呈现。请解释。

.countLegend p {
  margin: 0em;
  line-height: 1;
}

.legendTotal {
  width:1.3em;
  height:0.8em;
  fill: rgb(135, 206, 250);
}

.legendRejected {
  width:1.3em;
  height:0.8em;
  fill: rgb(197, 132, 240);
}

.legendInternalRejected {
  width:1.3em;
  height:0.8em;
  fill: rgb(220, 20, 60);
}

.legendKey {
  height: 1em;
  width: 2em;
}

<div class="countLegend">
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em" class="legendTotal"></rect>
        </svg>
        Count
        <span id="spnTotalTrans" class="legendValue">10,250</span>
    </p>
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em" width="1.3em" height="0.8em" style="fill: rgb(197, 132, 240);"></rect>
        </svg>
        Rejections Total
        <span id="spnRejectedTrans" class="legendValue">86,335</span>
    </p>
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em"></rect>
        </svg>
        Rejections Internal
        <span id="spnIntRejectedTrans" class="legendValue">86,335</span>
    </p>
</div>

Answer 1

这里的问题是您使用的是 SVG 元素，它需要 height 和 width attributes，而不是 CSS properties。不同之处在于，作为 SVG 元素的属性，它们不能移至 CSS。

根据SVG Spec ，对于 height 和 width 属性:

A value of 0 disables rendering of the element.

如您所见，如果将属性编辑回 SVG 元素，fill 属性 is still being applied ，所以 CSS 实际上并没有被忽略。

.countLegend p {
  margin: 0em;
  line-height: 1;
}

.legendTotal {
  fill: rgb(135, 206, 250);
}

.legendRejected {
  width:1.3em;
  height:0.8em;
  fill: rgb(197, 132, 240);
}

.legendInternalRejected {
  width:1.3em;
  height:0.8em;
  fill: rgb(220, 20, 60);
}

.legendKey {
  height: 1em;
  width: 2em;
}

<div class="countLegend">
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em" height="0.8em" width="1.3em" class="legendTotal"></rect>
        </svg>
        Count
        <span id="spnTotalTrans" class="legendValue">10,250</span>
    </p>
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em" width="1.3em" height="0.8em" style="fill: rgb(197, 132, 240);"></rect>
        </svg>
        Rejections Total
        <span id="spnRejectedTrans" class="legendValue">86,335</span>
    </p>
    <p>
        <svg class="legendKey">
            <rect y="0.2em" x="0.5em"></rect>
        </svg>
        Rejections Internal
        <span id="spnIntRejectedTrans" class="legendValue">86,335</span>
    </p>
</div>