Svg Rect Ignores Height

SVG Rect Ignores Height?

In SVG the x, y, width and height of <rect> elements are attributes rather than CSS properties. Only CSS properties can be styled using CSS.

SVG Rectangle inheriting width and height of parent

The <g> element does not have width and height attributes. Groups just encapsulate elements, they don't control their position or size. You could however use inner <svg> elements (see below).

Also, you have to set the position of SVG elements. SVG does not have any sort of automatic layout as HTML does.

<svg width="700" height="700">
    <g>
        <svg x="0"   width="66" height="140" class="bar"></svg>
        <svg x="100" width="132" height="140" class="bar"></svg>
        <svg x="200" width="99" height="140" class="bar"></svg>
    </g>
</svg>

SVG Rect positioning inside div is incorrect

Solution: add css position inherit to the svg.

position: inherit

The divs are well aligned. You can see the alignment in the Fiddle I have added border to the divs so that you can judge their alignment.

Its the svg and div for the box4 not aligned well.

border:1px solid red;

have a look:

http://jsfiddle.net/2dc3waqt/

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 aspect ratio is preserved when width is greater than height despite of the preventive setting

If I've understood correctly, you want the svg to change aspect ratio such that the diagonal line is always wholly in view.

Your svg is structured correctly to do this with preserveAspectRatio="none" on an image drawn with user units for the line and viewbox matching.

The reason your svg is extending beyond the page height is because the container div extends beyond the page height.

I've added a class to the parent div containing the svg and styled it to have height of 100vh ( minus a nominal pixel value to ensure scroll bars don't show). I also gave the div a border so you can see it now occupies the viewable screen and the SVG remders the line from top left to bottom right corners.

On a resizable page, the div will resize and the svg will change aspect ratio to always occupy it.

.svgFrame {
border: 1px solid red;
width: 100%;
height: calc(100vh - 20px);
}

        <div class="svgFrame" style="grid-row: 2; grid-column: 1; display: grid;">
            <svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
                <polyline points="0,0 1000,1000" stroke="blue" stroke-width="5px" />
            </svg>
        </div>

How to set width and height attributes on SVG use element?

Thanks for the comments. As I feared, it is apparently not possible.

Width and height attributes on <use> elements which reference a rect are simply ignored because

The width and height attributes only have an effect if the referenced
element defines a viewport

(source:https://www.w3.org/TR/SVG/struct.html#UseElement)

Update: A viable result with may be achieved by using CSS properties (also width and height) directly on elements without viewports. This will not distort stroke-width, rx, ry etc. and has excellent support across modern browsers at time of writing.

Svg Rect Ignores Height