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

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

30 голосов
/ 30 марта 2012

У меня есть узел 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 ]

23 голосов
/ 30 марта 2012

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

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

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

19 голосов
/ 30 марта 2012

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

4 голосов
/ 30 марта 2012

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

2 голосов
/ 03 сентября 2017

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...