Why Does a Rect Require Width and Height Attribute in Firefox

Why does a rect require width and height attribute in Firefox?

• In SVG 1.1 height and width are attributes i.e. you can't set the height and width via CSS.
• In SVG 2 it is proposed width and height should be CSS properties.

Back in 2016 only Chrome had implemented this part of the unfinished SVG 2 specification, since then Firefox has also implemented it so the testcase works as expected.

Setting SVG element width/height attributes using CSS in Firefox

Not all SVG element attributes can be styled with CSS. Only the ones designated as "properties" can be. See the list below from the SVG specification.

https://www.w3.org/TR/SVG/propidx.html

The (in development) SVG 2 specification will allow all attributes to be styled with CSS. And some browsers are starting to support that. But for now you won't be able to do it.

Update: Not all attributes will be styleable in SVG2. The list of styleable presentation attributes is here.

Rect x and y properties not working in Firefox

You have 2 issues here.

1. X and Y are not valid css properties.
   
   
   • Move them to inline attributes.
2. Your SVG element needs dimensions.
   
   
   • Add height and width.

button svg { /*add dimensions*/  height: 20px;   width: 20px;}.plusButton-topBar { /*x: 4px;   y: 16.5px;  Move these */   width: 2px;   height: 9px;}
.plusButton-bottomBar { /*x: 0.5px;   y: 20px;  and these*/   width: 9px;   height: 2px;}
.plusButton-topBar, .plusButton-bottomBar {   fill: #656c75;   -webkit-transform: matrix(1, 0, 0, 1, 0, 0);   transform: matrix(1, 0, 0, 1, 0, 0);   transition: all 0.218s ease;}

<button class="button button--plusButton" data-ng-click="plus.toggleState()" data-ng-class="{'is-checked':plus.state}">  <svg viewBox="-7 9 24 24" xml:space="preserve">    <rect x="4" y="16.5" width="2" height="9" class="plusButton-topBar" />    <rect x="0.5" y="20" width="9" height="2" class="plusButton-bottomBar" />  </svg></button>

SVG rects don't appear in Firefox

The problem is that you're setting the attributes (width and height) using CSS. Apparently, SVG 2 specification will allow attributes to be defined using CSS, and some browsers are starting to support that, but not all browsers support this yet.

If you set the attributes this way:

.attr("width", "28px")
.attr("height", "28px")

Your code will work. Here is the fiddle, which works in firefox: https://jsfiddle.net/mk4sxxbp/

Firefox SVG rect size not drawn for size greater than 300,150

Actually it works incorrectly in Chrome and correctly in Firefox.

You generally want to set a width and height when embedding SVG in html

Per the SVG Specification

The ‘width’ attribute on the outermost svg element establishes the viewport's width, unless the following conditions are met:

• the SVG content is a separately stored resource that is embedded by reference (such as the ‘object’ element in XHTML [XHTML]), or the SVG content is embedded inline within a containing document;
• and the referencing element or containing document is styled using CSS [CSS2] or XSL [XSL];
• and there are CSS-compatible positioning properties ([CSS2], section 9.3) specified on the referencing element (e.g., the ‘object’ element) or on the containing document's outermost svg element that are sufficient to establish the width of the viewport.

Under these conditions, the positioning properties establish the viewport's width.

Since all the above conditions are true you need to use a style which means an explicit width since that maps to style, or a CSS width property. It seems most other UAs ignore the above specification requirements.

SVG rect is Responsive with CSS in Firefox but not Chrome

For your case replacing --view-box-half: calc(50%); with --view-box-half: calc((100vh - 100px) / 2); should do the job (and would be the easiest solution)

Check your updated working example here

I think the issue with percentage height is related to viewBox and preserveAspectRatio

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

While the height is updating the viewport stays the same therefore the height of the rect is not updated. here is an interesting question that might be related

svg rect renders good in chrome and ie but bad in firefox and opera

You're missing width and height attributes on the <svg> element. Try width="100%" height="100%".

I'm afraid neither IE nor Chrome implement this properly but Chrome at least has plans to do so.

SVG rect not showing up in firefox but works on chrome

I expect you are setting the rectangle's width and height using CSS. Correct?

If so, that's an SVG 2 thing that currently only works in Chrome. You'll need to use regular width and height attributes if you want this to be cross-browser compatible.

<rect stroke-dashoffset="0" x="2.4px" y="2.4px" width="100px" height="100px"/>

Why is this SVG Path showing incorrect width and height on Firefox?

It looks like it's related to the way stroke-miterlimit is being used to calculate the dimensions. When changing stroke-miterlimit to 1 it adjusts the height from 4 to 1.45001

MDN

var svg = d3.select("body")  .append("svg")  .attr("width", 1800)  .attr("height", 600)
function drawCandle(x, y, width, upper, body, lower){  var path = d3.path()  // path.moveTo(x + width/2, y)  // path.lineTo(x + width/2, y + upper + body + lower)  path.moveTo(x, y + upper)  path.lineTo(x + width, y + upper)  path.closePath()  return path}
var p = svg.append('path')console.log(p.style('stroke-width'))
p.attr('d', drawCandle(200,100,20, 50, 100, 80))

path{  stroke: blue;  stroke-width:1px;  stroke-miterlimit: 1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>

---

Related Topics