Вставьте HTML-код в текстовый элемент SVG

У меня есть узел svg: text, и я хочу добавить в него 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.

Любая идея?

Ответы на вопрос(4)

script, чтобы открыть целевой URL-адрес .. и вообще не использовать тег.

 Elias MP03 сент. 2017 г., 16:39
Добро пожаловать в stackoverflow. Это не дает ответа на вопрос. Как только у вас будет достаточно репутации, вы сможете комментировать любой пост; вместо этого предоставьте ответы, которые не требуют разъяснений от автора.
 Baz22 мар. 2018 г., 06:11
Это верное альтернативное решение предполагаемой проблемы, и оно имеет здесь значение. Если это противоречит политике, политика должна быть обновлена.

Вы должны использовать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

 todotresde30 мар. 2012 г., 19:32
Спасибо! Это способ использовать то, что я ищу. Кроме того, я нашел ссылку, когда у кого-то есть такая же проблема с D3:groups.google.com/group/d3-js/browse_thread/thread/...
 Robert Longson30 мар. 2012 г., 18:26
Тег ForeignObject не может быть дочерним элементом текстового элемента.
Решение Вопроса

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

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

 Vishweshwar Kapse26 июл. 2016 г., 15:13
К сожалению, IE не поддерживает ForeignObject
 Robert Longson30 мар. 2012 г., 18:26
Тег ForeignObject не может быть дочерним элементом текстового элемента.
 todotresde30 мар. 2012 г., 19:34
Спасибо! Нашли решение по этой ссылке:groups.google.com/group/d3-js/browse_thread/thread/...

Почему бы не использовать 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> элемент допускается как дочерний элемент текстовых элементов.

 todotresde30 мар. 2012 г., 19:20
Мммм, не ясно, в чем разница. Не могли бы вы добавить пример?
 Robert Longson30 мар. 2012 г., 20:40
элемент ссылки svg находится в пространстве имен svg, элемент ссылки html находится в пространстве имен html, в противном случае они выглядят довольно похоже.

Ваш ответ на вопрос