Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

SLSCoder's Achievements


Newbie (1/14)



  1. Jack: WHAT? I very much appreciate your help. You've lost me here. How can the size of a thing determine its own position? From my understanding, left doesn't have anything to do with the element's container's width, it pertains to the container's left edge. If you code thing.left = container.width that makes sense but thing could be far left of the container if container.left isn't referenced. Can you please explain what you said? I hate to admit I'm a bit confused
  2. Thanks Blake. I don't see the jump. When the Soft & Link end the moves in the straight lines and start following the arcs (2 different tweens) there is a slight jump between the end & start points. The 'numbers' are exactly the same but the browsers see 2 different positions - thus a slight jump. It jumps forward at 1200 pixel width and backward on a cell phone. ??? Yea, doors were randomly appearing in the wrong place, sometimes the big image wasn't the right size . . . it was clearly not executing specific lines in the code - randomly and only if I cleared the cache first. Now the doors don't appear until the big image is downloaded. That seems to have fixed it. I recall you mentioning x & y numerous times but I never really got what you meant. How can I change left & top to x & y?
  3. Thanks Blake. Unless you see something wrong with the animation as it is, I'm done with it I've tested it in 4 different browsers on 2 different computers and 2 different browsers on 2 different cell phones. I've learned that browsers don't do animations and download images simultaneously very well. Sometimes they simply ignore random lines of code. I think I've got it working now. Please let me know if it doesn't look OK. SoftLink
  4. OK, I think it's as close to perfect as I can get it. Here's the latest. If it's messed up when you see it (with a cleared cache) please let me know so I can fix it. SoftLinkSys.com
  5. Thanks for the feedback. I noticed that I had to refresh it on the site to make it work. I thought (hoped) that it was just a caching issue. I'll speed it up as suggested. I've tried easing, delay and other things to smooth it out. It's responsive and I get different results at different screen resolutions. I've tested it in IE 11, Chrome, Firefox & Opera. It's working but only as long as I refresh the screen once. I have to fix that. Any ideas?
  6. After weeks of pestering you guys to help me, I've finally got it. I thought you might like to see what I ended up with. The site's not done but I think the animation is. Let me know if you see any problems. There a few minor jogs and I see things I'd like to fix but . . . softlinksys.com
  7. WOW!! I think I've finally got it! Without you guys, I never would have stood a chance. For my purposes, that would have rendered MorphSVGPlugin near useless to me. Not so!! I can position the svg to html points, html to svg points and svg elements to html points. I updated my codepen. I wanted to use it for reference in the future. Maybe you could use it or fork it and make a better version for other people having problems positioning svg in html. Blake: can I ask a personal question? How did you get that extensive education? Your code is beautiful and your vast knowledge is obvious. Are you a Greensock coder? I can't figure out whether I owe you a bottle or Greensock a donation
  8. You guys have been a tremendous help. I can position the svg in html pretty well now - THANK YOU! I've got 1 small problem still outstanding. Then I'm golden. How can I move an SVG element (not the whole svg) to an HTML coordinate? I've got a codepen above with a sort of practice/demo svg positioning within html. I try it in do6 function. I've tried as much as I can think of. Help??
  9. Man I hate when I do that; must be old age Thanks Jonathan. It's fixed.
  10. Blake! You're the MAN!! Thanks a whole bunch. That was GOLD!! I spent a day basically studying vectors and then spent time working with (practicing) positioning of svg to html and visa/versa. I finally GET IT! I can put the SVG anywhere I want now, using getBoundingClientRect(), thanks to you. I can put any HTML element on any svg element too. I did notice though that with some screen resolutions it doesn't position exactly right. Is there any way to fix that? I've still got one problem. I can't move an SVG element to a specific position in the html. I found this. About 3/4 down the page it gets close. I tried what I thought would work. It didn't. I've studied, reviewed and tried everything I can think of - no good. So, I created a demo to practice moving svg <-> html. In function do6 I try to move an svg square to an html dot. No can do. If you can help me with this one I think I've got it.
  11. OK, I've created a CodePen. It's a simple 'game'. Just put the point where the rects connect on the dot. Rules: You can only do it by moving the SVG in Javascript. It must be responsive. I absolutely cannot do it. Help? If I could do this all my SVG problems would go away.
  12. Thanks Blake. It took about 5 minutes to realize I still didn't have it. I had Irma to deal with, being in Central Florida. I understand the preserveAspectRatio attribute after reading that article. I was playing with: Interactive SVG Coordinate Demo Admittedly, I didn't take it into account. My biggest problem is not being able to get the size of the SVG after it's been scaled, in HTML coordinates. I tried I can put the top, left corner in a specific position but it's hard to know where that is without knowing it's height & width. I read through your code. Impressive. I made comments // Demonstrates how the aspect ratio is calculated inside an SVG // https://greensock.com/forums/topic/17018-move-then-tween-on-a-path/?page=2&tab=comments#comment-76430 // Try meet, slice, or none var aspectType = "meet"; // Try min, mid, or max var alignX = "mid"; var alignY = "mid"; var viewport = document.querySelector(".viewport"); var image = document.querySelector(".image"); var ball = document.querySelector(".ball"); var viewBox = { width: 1920, height: 1080 }; // Represents values from getBBox() var ballBox = { x: ball.offsetLeft, y: ball.offsetTop, width: ball.offsetWidth, height: ball.offsetHeight }; window.addEventListener("resize", resize); resize(); function resize() { var viewportWidth = viewport.offsetWidth; var viewportHeight = viewport.offsetHeight; //AHH - the HtmlToSvg Unit var scaleX = viewportWidth / viewBox.width; var scaleY = viewportHeight / viewBox.height; //Preserve the aspect ratio if (aspectType === "meet") { //Set the scale for both X & Y so the viewPort contains the viewBox scaleX = scaleY = Math.min(scaleX, scaleY); } else if (aspectType === "slice") { //Set the scale for both X & Y so the viewBox completely fills the viewPort scaleX = scaleY = Math.max(scaleX, scaleY); } //scaleX & scaleY are equal - scale var viewWidth = viewBox.width * scaleX; var viewHeight = viewBox.height * scaleY; var viewX = 0; //if alignX === "min" left of the viewBox @ left of the viewPort var viewY = 0; //if alignX === "min" top of the viewBox @ top of the viewPort if (alignX === "mid") { viewX = (viewportWidth - viewWidth) / 2; //center of viewBox @ center of viewPort } else if (alignX === "max") { viewX = viewportWidth - viewWidth; //right of viewBox @ right of viewPort } if (alignY === "mid") { viewY = (viewportHeight - viewHeight) / 2; //Middle of viewBox @ middle of viewPort } else if (alignY === "max") { viewY = viewportHeight - viewHeight; //Bottom of viewBox @ bottom of viewPort } //Manually scale the image & ball to position & preserve the aspect ratio. image.style.left = viewX + "px"; image.style.top = viewY + "px"; image.style.width = viewWidth + "px"; image.style.height = viewHeight + "px"; ball.style.left = (viewX + ballBox.x * scaleX) + "px"; ball.style.top = (viewY + ballBox.y * scaleY) + "px"; ball.style.width = (ballBox.width * scaleX) + "px"; ball.style.height = (ballBox.height * scaleY) + "px"; }
  13. OK, I've read the entire first part of the 3 part series by Sara Soueidan - again - this time very slowly, working with the demo throughout it. I'll read Part 2 tomorrow. I think I understand now. The viewPort is what you see. The viewBox is what the graphics are in. The viewBox is exactly the same size as the viewPort visually even if the units are different numbers (different units). So, if the viewBox width is 400 and the viewPort width is 800, then 1 viewBox unit = 2 viewPort units. The graphics inside the viewBox maintain the same number of viewBox units, no matter the size (in units) of the viewBox. Therefore graphics would appear smaller (viewPort & viewBox are visually the same) in a larger viewBox (in units) and visa versa. So this should let me position SVG elements according to HTML units: 1 HTMLSVGUnit = 1SVGUnit * (1HTMLUnit/1SVGUnit) To move an SVG element 1 HTML unit I have to move it 1 HTMLSVGUnit (yea I made that up :-\). Is that right?
  14. Thanks Blake. I did find this. It's for CSS, not SVG. Are the concepts the same? CSS3 Transform Matrix. Then there's this: SVG Coordinate Transformations. I almost understand this var pt = point.matrixTransform(svg.getScreenCTM().inverse()); I don't understand why 'inverse()'. My problem has been with positioning the SVG in the HTML. I finally did find a way to get the width and height of the SVG, even scaled using JQuery. $("#svg").width(), $("#svg").height(); I've got a couple questions about the Html VS. SVG numbers. 1. If CSS/HTML doesn't specify units, it defaults to px? Also, if SVG units aren't specified do they default to px? 2. If so, why do the SVG numbers increase faster than the CSS numbers? This is what tripped me up. Maybe this is the question. Is a pixel different in size between the CSS & the SVG? I'm still studying . . . and really appreciate your help.