Search the Community
Showing results for tags 'foreignobject'.
Found 5 results
-
I'm facing a problem with animate html inside foreignObject. when I click the button it animates. it works normally on desktop and Android devices and is debug responsive with iPhone on the Chrome dev tool. but when I'm testing in a real iPhone. it causing problems. the text and jumping big above the SVG and this is not i want. how can i fix it ? Please help me. this is the demo in codesandbox: animate html ìn foreignObject - CodeSandbox
-
I'm having an issue with animating an HTML element nested inside an SVG with <foreignObject>. When the SVG is set to 100%, there's no problem, but when it's dimensions are scaled the <foreignObject> elements don't honour the resizing of the parent SVG when they're animated and act as if the SVG were set to 100%. Here you can see how it looks at 100%: And here's the Codepen: And here's how it looks when the SVG is set to Width: 50%: And the Codepen: Love to hear if there are any solutions to this? I'm aware that using the transform: scale on the SVG will solve this, but hoping to find a way to use SVG built-in resizing to save some work at implementing this. Thanks in advance, Lachlan
-
Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome -
I've seen lots of posts on Stack Overflow as well as here regarding animating motion blur. I wanted to share my codepen in case it helps someone else or spurs a thought that leads to a better solution. It's not the pithiest code and I'm sure I'll end up tweaking it once I get it into my Electron app. The only thing I noticed, and it's not as big of a deal to me since I'm using an Electron app that only uses Chromium, but FireFox isn't showing the underlying elements. If you run inspector you can see that they're being animated and positioned properly but they don't show up. Not sure what the issue is. If I use createElementNS to create the div elements it doesn't utilize the blur filter in Chrome. But, if I don't use createElementNS to create the filters, it doesn't work in Chrome. Thoughts?
- 12 replies
-
- 2
-
-
- motion blur
- foreignobject
- (and 1 more)
-
Playing with the machine gun text effect from http://codepen.io/mfgpker/pen/cmiue?editors=1010 I need to be able to export these frames as PNG images but running into some trouble because of the way foreignObjects are seen I suppose. The original version of the machine gun text animation used jquery to create and address elements and, though the text was visible in the resulting PNG exports, the positioning information was completely ignored - even though the animation runs fine in the browser. So, I decided to go to great pains to namespace everything in case that was the issue. The animation works fine, but now, the exported images don't show the text at all. The other thing I wondered was if I needed to move the styles into the SVG or the foreignObject but that hasn't solved the real problem. I'm pretty sure it has to do with the way XMLSerializer is seeing or processing the data from the master SVG so I've been scouring the Internet to see if anyone else might have encountered this issue. Coming up dry. Is there anything I can do with GSAP's animation settings to circumvent what's happening in a way XMLSerializer would be able to process accurately?
