Geek asks and answers

SVG foreignObject and absolute positioning

I have a problem with absolute and relative positioning when I use it for html objects inside svg:foreignObject.

I did this jsfiddle to demonstrate my problem.

div.wrappershould be in the same position as rectin svg:g, and the paragraphs inside this div should be located as described in css.

I have a problem in the following browsers (Mac):

  • Safari 6.0.3
  • Chrome 26.0.1410.63
  • Maxthon 4.0.3.6000.

It works as I expect in Firefox 19.0.2.

Is there a problem with my code? Does anyone know how to solve this?

UPDATE

I found this error which may be the problem. It seems that there are many problems foreignObjectin tracking problems for webkit.

If anyone has a way around paragraphs in the corners of a div, I would appreciate it.

+5
source share
1 answer

For a long time after this post and error are saved.

I really found out that if you use attributes x="50" Y="50"in your element foreignObject, it works as expected in Chrome.

I know that this is not the same as that transform, but at least you can correctly post your content.

+3
source

More articles:


All Articles