CODEWITHSUNDEEP
htmlcsssvg
333Matt
333Matt

Reputation: 1188

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

Pink/middle rectangle is visible. Top and bottom are not, have had their style moved to a class in external CSS. Inspecting element shows a 1x1 image at top/rightmost side? of the svg area. I am not sure why having the style attributes in the external CSS would cause the rectangles not to render as expected. Please explain.

Shows middle rectangle

Shows invisible rectangle

enter image description here

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

Upvotes: 0

Views: 74

Answers (2)

TylerH
TylerH

Reputation: 21069

The problem here is that you are using SVG elements, which require height and width attributes, not CSS properties. The difference is that, as attributes of the SVG element, they cannot be moved to CSS.

According to the SVG Spec, for both height and width attributes:

A value of 0 disables rendering of the element.

As you can see if you edit the attributes back into the SVG element, the fill property is still being applied, so the CSS is actually not being ignored.

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

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124169

In SVG (unlike HTML) width and height (and x and y) of <rect> elements are attributes rather than CSS properties. As such they cannot be set in CSS and must be set in the SVG document as markup.

In fact most sizing/positioning in SVG is via attributes rather than CSS. There are plans to change this in the upcoming SVG 2 specification but that specification is both unfinished and not yet implemented.

Upvotes: 0

Related Questions