svg路径上的jQuery包装隐藏路径。

Question

我正在尝试将svg路径包装到HTML锚元素中。问题是，包装已经完成，但是svg路径不再出现在页面上。

$('svg-path').each(function() {
    var li_name = $(this).data("name");
    $(this).wrap($('<a xlink:href=""></a>'));
    $(this).parent().attr("xlink:href", $(`.linker-${li_name}`).text());
  });

希望有人能帮我。

Answer 1

SVG <a>元素不同于<a>元素。它们有一个不同的名称空间。您的jQuery正在插入一个<a>元素，就SVG呈现而言，它是一个无效的元素。因此，它和它的内容( <path>)一起被忽略。

通常，不能用jQuery添加SVG元素。它只为HTML设计。因此，您需要使用另一种方法--比如vanilla。

​

$('.svg-path').each(function() {
    var li_name = $(this).data("name");
    wrapSvgLink(this, li_name);
});


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", url);
  // 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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
  <path class="svg-path" d="M 50,50 L 250,50 L 150,100 Z" data-name="foobar"/>
</svg>

​