为什么当样式移动到 CSS 时矩形看起来不一样（或根本不一样）？

Question

Pink/middle 矩形可见。顶部和底部不是，它们的样式已移至外部 CSS 中的 class。检查元素在 top/rightmost 侧显示 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 属性，而不是 CSS 属性。不同的是，作为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>

Answer 2

在 SVG 中（与 HTML 不同）<rect> 元素的宽度和高度（以及 x 和 y）为 attributes rather than CSS properties。因此它们不能在 CSS 中设置，必须在 SVG 文档中设置为标记。

事实上，SVG 中的大多数 sizing/positioning 是通过属性而不是 CSS。有计划在即将发布的 SVG 2 规范中对此进行更改，但该规范尚未完成且尚未实施。

为什么当样式移动到 CSS 时矩形看起来不一样（或根本不一样）？

Why rectangles don't appear the same (or at all) when style is moved to CSS?

html

css

svg