UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3550.0 Safari/537.36

Steps to reproduce the problem:
1. Open the attached SVG file or check this codepen: https://codepen.io/anon/pen/NLMRBZ?editors=1000

or create an SVG file which uses width and height as SVG properties for <use>:

<use x="140" y="20" xlink:href="#Symbol-1" style="width: 40px; height: 40px;"/>

What is the expected behavior?
In the example, the symbol on the right side should have the same size as the symbol on the left side. The width and height CSS properties should affect the size of the <use> element.

What went wrong?
The symbol on the right side is huge. It's size cannot be controlled with the width and height style properties. Only the width and height attributes have an effect, as demonstrated by the symbol on the left side.

The SVG2 spec says that <symbol> and <use> elements have x, y, width and height as CSS geometry properties: https://svgwg.org/svg2-draft/struct.html#SymbolElement

The width and height properties work fine for other shapes, such as <rect> and <image> elements, but not for <use> and <symbol>.

These are related bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=400725
https://bugs.chromium.org/p/chromium/issues/detail?id=806289

Did this work before? No 

Does this work in other browsers? N/A

Chrome version: 71.0.3550.0  Channel: canary
OS Version: OS X 10.13.6
Flash Version:
 

Deleted: use-width-height-properties.svg 793 bytes

use-width-height-properties.svg 793 bytes Download