SVG overflowing its 'bounding box' while scaling?

[A7DC]

Hi everyone,

Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. 

Any ideas what I'm doing wrong?

Thanks

See the Pen bRJrBN?editors=0010 by A7DC (@A7DC) on CodePen

[PointC]

HI @A7DC

 

You're not doing anything wrong. You may have to make an adjustment though. What's happening is the Elastic ease is overshooting the scale beyond a value of 1 so the heart goes beyond your SVG edges.

 

One option would be to change the size of the SVG so the heart path has some breathing room to expand beyond a scale of 1. 

Another option would be to use a CustomEase - https://greensock.com/customease

 

You can sometimes make things work by setting the overflow of the SVG to visible too, but I'm not a fan of that option as it can cause other problems.

 

Hopefully that helps. Happy tweening.

 

[Jonathan]

Hello @A7DC and welcome to the GreenSock Forum!

 

Whats happening is the CSS overflow property is set to overflow hidden.  Add this line to your CSS

 

button svg:not(:root) {
    overflow: visible;
}

 

See the Pen eRqWBR by jonathan (@jonathan) on CodePen

 

Resource:

SVG overflow: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow

 

Just keep in mind that using overflow on SVG is a little different than DOM based elements, but should not give you any issues.

 

The overflow attribute has the same parameter values as defined for the css overflow property. However, the following additional points apply:

• The overflow attribute only applies to elements that establish new viewports (see below), <pattern> elements and <marker> elements. For all other elements, the property has no effect.
• For those elements to which the overflow attribute can apply, if the overflow attribute has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a <clipPath> element whose content is a <rect> element which defines the equivalent rectangle, and then specifying the <uri> of this <clipPath> element on the clip-path attribute for the given element.
• If the overflow attribute has a value other than hidden or scroll, the property has no effect.
• Within SVG content, the value auto is equivalent to the value visible.
• When an outermost svg element is embedded inline within HTML, if the overflow attribute has the value hidden or scroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
• When an outermost svg element is stand-alone, the overflow attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
• The initial value for overflow as defined in CSS is visible, and this applies also to the root <svg> element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the overflow attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value hidden.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css overflow for further information.

 

[A7DC]

Hey, thanks for the replies Craig and Johnathan. Unfortunately there's a bug in Safari where the overflow: visible rule isn't honoured, so the SVG is still clipped regardless of whether you set the overflow to visible or not.

 

Johnathan, your fork also shows this, both on latest MacOS and iOS Safari. Does it appear clipped to you also? 

So it looks like the solution really, is to go with changing the size of the SVG (as Craig recommends) so that it has more breathing room to animate. The problem with this approach, however, is that you've then got to mess around with all the spacing and position of the SVG which doesn't exactly scale well. 

I'll continue to search for a better solution, but I think Craig's idea might have to suffice for now. It's a shame, you'd think Apple would be on to something like this. The bug has been around for years it seems.

[Jonathan]

Whats happening is the browser defined style sheet adds that as a default CSS rule for svg elements. The :not(:root) just makes sure that the svg element is not the root of the document which it can in some cases when the svg is not loaded inside the DOM, but a SVG document. So you have to see in the inspector what browser defined CSS rule is overriding your svg elements CSS overflow property. See (https://www.w3.org/TR/SVG/styling.html#UAStyleSheet)

 

Then try

 

svg:not(:root) {
    overflow: visible !important;
}

 

Or you can try this:
 

svg,
html body svg:not(:root) {
    overflow: visible !important;
}

 

[A7DC]

Hey Jonathan, are you certain that's the case? I've already tried increasing the specificity of the selectors and using !important. I still get the same results on Safari. Is it different for you?

[Jonathan]

i would have to look at the code in Safari.. since Safari is webkit and webkit is littered with bugs and caveats for CSS properties and how they affect SVG and DOM elements.

 

Like this bug

 

https://bugs.webkit.org/show_bug.cgi?id=96163

 

[A7DC]

Yup, this JSFiddle seems to work on Safari and respect the overflow visible rule: http://jsfiddle.net/nSUEs/1/ ?

[Jonathan]

Are you seeing this in Safari 8 or 7? I have seen where it works in safari 8 but safari 7 is buggy. If it doesnt work in codepen im not sure since codepen is buggy sometimes due to loading in iframes.

 

I have also seen instances where in safari it needed to use the visibility attribute set to visible on the main SVG and use visibility="inherit"

 

https://www.w3.org/TR/SVG11/painting.html#VisibilityProperty

 

Another way is you can also try to increase the size of the viewport on the main <svg> element as another option for faking overflow visible.

 

Gotta love or hate Safari

[A7DC]

My MacOS Safari version is Version 10.1.1 (12603.2.4) and iOS is on 10.3.2

I'm downloading webkit now to see if the issue is also on there too.

 

[PointC]

Here's another option: fill the heart path with red, but animate the scale of the entire SVG.

 

See the Pen pwMwVO by PointC (@PointC) on CodePen

Happy tweening.

[A7DC]

Legends... both of you! Thanks guys ?

 

Edit: Such an obvious solution, can't believe I didn't think of that lol!

[PointC]

@Jonathan is a legend.  I just run around here and pretend I know what I'm doing. 

 

Glad to hear you have a solution that works. Happy tweening.

[Jonathan]

Come on Craig your no pretender! .. You are a Legend as well Good Sir

[Sriram R]

I'm trying to add click events to the SVG Element which has visible overflow & a shape element(circle/path) which overflows the SVG. 

 

On Safari(9,10, 11), click event doesn't work in the area where the shape element(circle/path) overflows & works fine inside the area present within the SVG.

I've created a jsfiddle to demo this behaviour.  Link: http://jsfiddle.net/sriram15690/v722ppfd/11/

Is this also a bug in Safari? The click event works in all browsers including IE.