Fix a <g> elements width within an elastic viewport

[kvnmcwebn]

Hi,
I wold like to add some text to my svg animation. The svg container is totally elastic but I would like to fix the width and position of the text so that it doesn't scale at all. Could I maybe even set a width and position on text's  <g> wrapper element? Can GSAP set width of an element be set like this in a timeline easily?  Do I need to use bbox? I've been trying to use jquery but I can't seem to target svg elments within an elastic svg canvas. 
Thanks in advance

[PointC]

If you don't want your text to scale or move, I'd say it probably wouldn't need to be part of the SVG. Just a plain text element absolutely positioned over the top of the SVG should work just fine. Do you happen to have a demo of what you're trying to do?

 

Happy tweening.

[kvnmcwebn]

Well just the animation I've been working on...I've tried css positioning outside of the svg viewport with absolute and fixed positioning and a z-index of 9999, I've tried foreignObject within the svg element. I've tried using jquery to fix the width of the <g> element with css and just normally. But nothing has worked so far. There's a lot of code in the below pen now, most of the stuff I've tried is right at the top of the html... 
 

See the Pen ModJbR by kvnmcwebn (@kvnmcwebn) on CodePen

 

[Dipscom]

Hey @kvnmcwebn!

 

I think you are overcomplicating things here. There's a simple way around it with minimal code. Try changing the following:

 

From this:

<div id="head" style=" margin-bottom:-100px; z-index: 9999;   top:50; left: 100; ">
	<h1 style="color: #ffffff;"> Some Text Here<h1>
</div>
<svg>...</svg>

To this:

<svg>...</svg>
<div id="head" style="top:50px; left: 100px; position:absolute">
	<h1 style="color: #ffffff;">Some Text Here<h1>
</div>

 

The browser reads and parses the code from top to bottom so, if you want to have something sitting on top of something else, you should always first have the relevant code doing so. There's no need to have z-index involved if you can get the same result by just altering the order of you HTML.

 

And since you are making things responsive, I would also recommend wrapping those two elements in another tag and  having its position set as relative. That is because absolutely and fixed positioned elements are always aligned to the first parent element with a position:relative which, might not always produce the desired effects if you do not set one yourself.

 

<div style="position:relative">
	<svg>...</svg>
  <div id="head" style="top:5%; left:10%; position:absolute">
      <h1 style="color: #ffffff;">Some Text Here<h1>
  </div>
</div>

 

Note that I have changed the top and left to percentages. And that you forgot to add the unit (px) in your original code.

 

I've also seen that you are trying to tween a boolean value somewhere in your code as you have the following error in the console: 'invalid randomize tween value: true'. You might want to check that out.

 

Other than that, good job, this project of yours is shaping up quite nicely.

 

Happy Tweening!

[Jonathan]

Hello @kvnmcwebn

 

Keep in mind that SVG will not use CSS position absolute or fixed. You can use that on the main <svg> element but not on any of its children. Since they are positioned with coordinates based on the <svg> element. Also z-index wont work on SVG children either. To bring SVG child elements front and back to mimic z-depth (z-index), then that is done by the order of the SVG children. Elements that are last in the markup order will have a higher z-depth above the previous elements. Z-index attribute will be supported SVG 2 when it becomes available in the near future

 

[kvnmcwebn]

wow thanks dipscom!