1415155 - Symbol height does not respect parent SVG height

Status: RESOLVED DUPLICATE of bug 1057706

(Core :: SVG, defect)

Description

[peter.mouland]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce:

Create an SVG containing a Symbol.
Set the height and width of the SVG and symbol.
Set the height of the symbol to be bigger than the SVG.

CodePen Demo (under heading Resizing SVGs symbols): https://codepen.io/peter-mouland/details/JErvZY/


Actual results:

The SVG no longer contains the symbol.



Expected results:

The symbol to still be viewable within the SVG

Comment 1

[Robert Longson [:longsonr]]

It's pretty confusing what you're trying to tell us here. Could you produce a testcase showing just the issue at hand please?

Comment 2

[Robert Longson [:longsonr]]

Also what version of Firefox are you testing this on? Does it work in a Nightly or 57 Beta?

Comment 3

[Robert Longson [:longsonr]]

Also does setting overflow: visible have any effect.

Comment 4

[peter.mouland]

Tested in: Firefox 56 & Firefox Nightly (v58.0a1)

I've created a new codepen to showcase only this one issue.

https://codepen.io/peter-mouland/pen/vWXoeK

Basically, the question is around which size the svg, and it's contents should be.

All other browsers restrain the symbol to the SVG container basically ignoring the height and width attributes of the symbol. 
Firefox respects the symbols height and width attributes, which means the contents overflows outside the SVG.

I'm not sure which browsers are doing it correctly, but in my case I was hoping the behaviour of the other browsers was also replicated in Firefox.

Setting `overflow: visible` does show the whole symbol but the dimensions are that specified on the symbol and not on the svg.

**Resizing SVGs symbols**
  
Size matches outer SVG in Chrome, Safari, Edge 14+, IE Opera (not in Firefox)

<svg width="82px" height="16px" >
  <symbol id="star" viewBox="0 64 512 512" width="150" height="150">
    <path transform="scale(1, -1) translate(0, -512)" d="M342 147q-8 -5 -5 -14l46 -140l-120 87q-7 5 -14 0l-120 -87l46 140q3 9 -5 14l-119 87h147q10 0 12 9l46 140l46 -140q2 -9 11 -9h148zM499 259h-176l-55 168q-3 9 -12 9t-12 -9l-55 -168h-176q-10 0 -12.5 -8.5t4.5 -13.5l143 -104l-54 -169q-3 -8 4 -13.5t15 -0.5 l143 104l143 -104q3 -2 7 -2t8 2q7 6 4 14l-54 169l143 104q7 5 4 13.5t-12 8.5v0z">
    </path>
  </symbol>
</svg>

<svg width="82px" height="16px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use></svg>

Comment 5

[Robert Longson [:longsonr]]

The SVG 2 spec says overflow: visible is correct. SVG 1.1 said hidden. We still implement SVG 1.1 and will likely continue to do so for some time to come if not forever since overflow: visible is a performance killer. 

The moral of this story is, keep your drawing within the symbol bounds.

Comment 6

[peter.mouland]

Thanks for you patients.  After reading https://www.w3.org/TR/SVG2/struct.html#SymbolElement, the following paragraph does make it sound like firefox is rendering it in the correct way.

"New in SVG 2. Allowing geometry properties to be specified on a symbol provides a more consistent rendering model, and allows authors to set a default size for each symbol (which may still be over-ridden by attributes on the ‘use’ element)."

Thanks again