Встроить внутренний HTML в SVG и выровнять по центру

#html #css #svg

#HTML #css #svg

Вопрос:

Извините, если я не собираюсь делать это правильно. Я пытаюсь встроить HTML в форму SVG и пытаюсь выровнять HTML по центру с формой.

Вот мой код:

 <svg xmlns = "http://www.w3.org/2000/svg" class="shape1" width="200" height="200" style="margin-top:-100px;">
                            <circle cx="100" cy="50" r="100"  fill="white">


                            </circle>
                            <foreignObject x="0" y="80" width="100%" height="100%">
                                <body xmlns="http://www.w3.org/1999/xhtml">
                                    <div>
                                     <h3 style="font-family:'myriad Pro' ">HOME</h3>
                                    </div>
                                </body>
                             </foreignObject>

                        </svg>
  

В нынешнем виде я должен сделать это вручную, но, похоже, это не согласовано в Chrome и Firefox.

Комментарии:

1. кажется, работает? jsfiddle.net/GCyrillus/N6HBQ

2. Что конкретно несовместимо?