Добавить тег привязки к тексту SVG - PullRequest
0 голосов
/ 27 апреля 2020

Я новичок ie для WebDev; извините за любые очевидные QTNS.

Я пытаюсь добавить тег привязки (href) к тегу SVG "text" "some_random_task".

<svg class=....>
    <g class="node parent expanded" transform="translate(50,40)" style="opacity: 1;">
        <circle r="6.666666666666667" class="task" data-toggle="tooltip" title="" height="20" width="805" task_id="some_random_task" style="fill: rgb(240, 237, 228);" data-original-title="operator: some_operator<br/>depends_on_past: true<br/>upstream: 1<br/>retries: 1<br/>owner: <br/>start_date: Fri, 26 Apr 2019 16:00:00 GMT<br/>end_date: <br/>"></circle>
        <text dy="3.5" dx="10">some_random_task</text>
        <g class="stateboxes" transform="translate(450,0)"><rect class="state null" data-toggle="tooltip" rx="0" ry="0" title="" x="0" y="-5" width="10" height="10" style="shape-rendering: crispedges; stroke-width: 1; stroke-opacity: 0;" data-original-title="Task_id: some_random_task<br>Run: 2020-04-18T16:00:00+00:00<br>"></rect>
            <rect class="state undefined" data-toggle="tooltip" rx="0" ry="0" title="" x="12" y="-5" width="10" height="10" style="shape-rendering: crispedges; stroke-width: 1; stroke-opacity: 1;" data-original-title="Task_id: some_random_task<br>Run: 2020-04-21T16:00:00+00:00<br>"></rect>
        </g>
    </g>

Я пытался, как показано ниже, просматривая какой-то другой пост и Я вижу, что теги добавляются, но они не выглядят как гиперссылки. Его обычный текст.

$('g.node.parent.expanded text').each(
function(i,e) {
  var li_name = $(this).html();
  wrapSvgLink(this, li_name);
// console.log($(this).html())
});

function wrapSvgLink(elem, url) {
  // Create an SVG <a> element
  var a = document.createElementNS(elem.namespaceURI, "a");
  // Add the xlink:href attribute
  a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", 'http://google.com');
  // Insert the new <a> element into the DOM just before our path
  elem.parentNode.insertBefore(a, elem);
  // Move the path so it is a child of the <a> element
  a.appendChild(elem);
}

После выполнения кода:

<a xlink:href="http://google.com">
<text dy="3.5" dx="10">some_random_task</text>
</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...