Search the Community
Showing results for tags 'foreignobject'.
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?
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 su
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.