Вставить HTML-код внутри текстового элемента SVG

У меня есть svg: text node, и я хочу добавить в него HTML-код. На самом деле, мой код:

<text x="10" y="54" text-anchor="start" class="barLegend">Hello!</text>

И я хочу добавить что-то вроде этого:

<text x="10" y="54" text-anchor="start" class="barLegend"><a href='www.gmail.com'>Gmail</a></text>

Конечно, я хочу, чтобы ссылка работала, но она просто отображает весь HTML.

Любая идея?

Ответ 1

Взгляните сюда:

http://web.archive.org/web/20120418122612/http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

Тег SVG foreignObject позволяет смешивать содержимое без SVG на вашей странице. Например, вы можете удалить некоторый HTML в середине элемента SVG.

Ответ 2

Почему бы не использовать элемент SVG <a> в этом случае? Не забывайте, что href должен быть xlink: href. Например.

<text x="10" y="54" text-anchor="start" class="barLegend"><a xlink:href='http://www.gmail.com'>Gmail</a></text>

Только элементы анимации SVG, дескриптивные элементы (<title> или <desc>), дочерние элементы текстового содержимого (<tspan> или <textPath>) или элемент SVG <a> разрешены как дети текстовых элементов.

Ответ 3

Вы должны использовать тег foreignObject, например:

<foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
  <body xmlns="http://www.w3.org/1999/xhtml">
    <a href='www.gmail.com'>Gmail</a>
  </body>
</foreignObject>

См. также здесь http://www.w3.org/TR/SVG/extend.html и https://developer.mozilla.org/en/SVG/Element/foreignObject

Ответ 4

Другое решение здесь - разместить событие в элементе и использовать javascript для открытия целевого URL.. и вообще не использовать тег.