Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

swampthang last won the day on June 19 2016

swampthang had the most liked content!

swampthang

BusinessGreen
  • Content Count

    345
  • Joined

  • Last visited

  • Days Won

    1

swampthang last won the day on June 19 2016

swampthang had the most liked content!

Community Reputation

121 Specialist

About swampthang

  • Rank
    Advanced Member
  • Birthday September 11

Profile Information

  • Gender
    Male
  • Location
    Louisiana

Contact Methods

  • Skype
    swampy1956

Recent Profile Visitors

3,450 profile views
  1. Ok, for anyone else who has this issue, I may have learned my lesson with foreignObjects. I can't believe I didn't know about being able to use an <image/> tag in a nested SVG with xlink:href but here's the solution. It seems to work in all browsers except Internet Exploder but foreignObjects don't work in it anyway. https://codepen.io/swampthang/pen/zYGmYzo
  2. First, this is only happening in Safari as far as I can tell. This is a simple fade-in for (please don't curse me) an image inside a foreignObject and a nested SVG (ducking a right hook). I discovered that, as soon as the animation begins and the style attribute is added to the image, the browser redraws and sets the image (which is first in the stacking order) on top of the SVG. I set up 3 buttons. The timeline starts out paused, so clicking the play button shows you the stacking switcheroo. REWIND/STOP is obvious. The 3rd button pauses the timeline and removes the style attribute from the img. If you do that towards the end of the timeline, you can see the gray circle (the svg) come back to the top of the stack as it should. Does anyone know a way around this in Safari?
  3. Ok, I think I might have figured this out. I had to embed the foreignObject in a <g> element. I wrapped the image itself in a foreignObject. Seems to have fixed it! https://codepen.io/swampthang/pen/ExjQBWM?editors=1010
  4. In the app, I can convert SVGs into png images and it will work. But, I'm trying to avoid the file-size hit. You mention avoiding nested SVGs so I was thinking maybe I could create a <g> element and drop the contents of the SVG into it. I tried doing that but it doesn't display either. Safari. Grrrrr.
  5. Still working on the Self-Contained SVG app and ran across a Safari display issue. The codepen looks right in all browsers except Safari. Even works in Internet Exploder and Edge. There's an SVG (blue button) nested in the main SVG that should be visible over a base64 image that's inside a foreignObject. Structure is like this: <svg width="728" height="200" xmlns="http://www.w3.org/2000/svg" version="2" viewBox="0 0 728 200"> <style> <![CDATA[ // styles go here ]]> </style> <foreignObject x="0" y="0" width="728" height="200"> <div xmlns="http://www.w3.org/1999/xhtml" width="728" height="200" style="width: 728px; height: 200px"> <div> <img src="data:image/jpeg;base64,base64DataGoesHere" /> </div> </div> </foreignObject> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 124" x="150" y="37" preserveAspectRatio="xMinYMin meet"> <g data-svg-origin="239 121" transform="matrix(1,0,0,1,0,0)" style="visibility: inherit; opacity: 1; transform-origin: 0px 0px 0px;" clickurl="https://aquickmarkewt.com" newwin="true"> <g xmlns="http://www.w3.org/2000/svg"> <g> <path d="M64 121.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" style="isolation:isolate" fill="#231f20" stroke="#231f20" stroke-miterlimit="10" opacity=".25"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58h0A49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58h0a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc" stroke="#231f20" stroke-miterlimit="10"></path> <path d="M58 115.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" fill="#231f20" stroke="#231f20" stroke-miterlimit="10"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path> <path d="M444.6 18.4a49.24 49.24 0 019.9 29.6A49.55 49.55 0 01405 97.5H48a49 49 0 01-29.6-9.9A49.24 49.24 0 0058 107.5h357A49.55 49.55 0 00464.5 58a49.24 49.24 0 00-19.9-39.6z" fill="#166091"></path> <path d="M23.5 65A41.53 41.53 0 0165 23.5h357a40.79 40.79 0 0125.6 8.9A41.33 41.33 0 00415 16.5H58a41.46 41.46 0 00-25.6 74.1A40.79 40.79 0 0123.5 65z" fill="#47a8ea"></path> </g> </g> <text x="0" y="0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 251, 76, 0, 1);" data-svg-origin="-120 -39" transform="matrix(1,0,0,1,0,0)" class="">Button</text> </g> </svg> <script> <![CDATA[ // all the javascript goes here ]]> </script> </svg> Chris Gannon mentioned wrapping the SVG with a div and adding the xmlns attribute. I tried that and it works as long as there isn't any javascript (which has to be contained in a CDATA block). If you do, it complains about an Unexpected token right where the CDATA starts in the script tag. Unexpected token '>' I tried placing the nested SVG in a foreignObject, when you do, the SVG no longer appears. The pen that has all the javascript and animation in it is here in case anyone is interested... https://codepen.io/swampthang/full/OJVQxzy If you inspect the elements tab in Safari's inspector on that page, you can drill down into the nested SVG and see the animation running and, selecting the g element that is animating, you can see the bounding box highlighting where it should show up. I saw where Jack told someone that Safari is the new IE. I believe it! Any of you SVG gurus have any idea what needs to happen to be able to see the nested SVG in Safari?
  6. Ahh, ok. Thanks for clarifying, Jack. Much appreciated!
  7. Ahhhh, thanks for the info, @ZachSaucier!
  8. I am a Business Green member so have Custom Ease and Custom Bounce. I'm creating a new app that allows a user to export a self-contained SVG but, of course, I can't include anything in the SVG but the free version of GSAP. Is it possible to create a custom bounce, for example, and export that out as SVG Data and run it using the basic ease engine?
  9. Was able to get it all working. Thanks for the help all.
  10. Yea, it needs to be a file that someone can place anywhere they like using the object tag. But, given the fact that I have to save it as a string to a file, I should be able to use a regex to assure all img tags are closed by parsing the string just before it gets written to the file. Thanks again for the help on this.
  11. Thanks, @OSUblake. Really appreciate that. You gave me a couple of things to try today!
  12. Thanks, Blake. Yea, it's strange alright. Wanting to be able to export a self-contained SVG with animation like the one attached. test2.svg
  13. @OSUblake this is a very simple codepen. I've tried using an xml string to create the img and forcing a closing tag like: <img src="source" /> but when it gets added, the closing "/" always gets stripped out. If you then take that svg outerHTML and create an svg file with it and try to open that in a browser, you get the following error: This page contains the following errors: error on line 2 at column 154: Opening and ending tag mismatch: img line 0 and div Below is a rendering of the page up to the first error. If you add back the closing tag to the img, it works fine. I just have to figure out how to do that dynamically. https://codepen.io/swampthang/pen/NWqdMzo?editors=1010
  14. Will do ASAP. Thanks for the response, @OSUblake
  15. Preface this by saying this isn't a GSAP question but I've spent 2 days trying to figure this out. If I had hair it would all be gone by now. Does anyone know how to dynamically add an img element to a foreignObject in an SVG without the closing tag being removed? For an inline SVG it doesn't seem to matter but if you view the svg itself in the browser, it complains about missing the closing tag for an img. I'm dead in the water on all the above if I can't figure this out. Just hoping for some mercy here. Stack overflow is void of good info on this.
×