SVG foreignObject 및 절대 위치 지정

svg:foreignObject 안에 html 객체를 사용할 때 절대 위치 및 상대 위치 지정에 문제가 있습니다.SVG foreignObject 및 절대 위치 지정

나는이 문제를 설명하기 위해 jsfiddle을 만들었습니다.

div.wrapper은 svg:g의 rect과 같은 위치에 있어야하며이 div의 단락은 CSS에 설명 된대로 배치해야합니다.

Firefox 19.0.2에서 예상대로 작동합니다.

내 코드에 문제가 있습니까? 아무도 이것을 해결하는 방법을 알고 있습니까?

UPDATE

나는 문제가 될 수있는 this bug을 발견했다. Webkit의 issue tracker에는 foreignObject과 관련된 많은 문제가있는 것으로 보입니다.

div의 모서리에 단락을 배치하는 방법에 대한 해결 방법이 있다면 감사하게 생각합니다.

2013-04-16 swenedo

SVG에서 '변환'의 단위를 지정하면 'translate (50px, 50px)'와 같이 작동합니다. –

'translate (50px, 50px)'가 유효하지 않기 때문에 단지'g'를 (0,0)으로 이동시킵니다. See section 7.4 : [SVG 좌표계 변환] (http://www.w3.org/TR/SVG/coords.html) – swenedo

해결 방법은 다음과 같이 x = "50"및 y = "50"으로 설정할 수 있습니다. 외계인. –

이 게시물과 버그가 지속 된 이후로 오랜 시간이 지났습니다.

실제로 foreignObject 요소의 x="50" Y="50" 속성을 사용하면 Chrome에서 예상대로 작동한다는 것을 알았습니다.

나는 transform과 같지 않지만 적어도 콘텐츠를 올바르게 배치 할 수 있음을 알고 있습니다.

2016-02-23 06:01:31

답변