使用 jQuery 在 SVG 中获取锚点的 href 值答案

【问题标题】：Getting the href value of an anchor within an SVG using jQuery使用 jQuery 在 SVG 中获取锚点的 href 值
【发布时间】：2021-02-04 20:13:18
【问题描述】：

我正在使用 jQuery 来定位我创建的 SVG 图像中的锚元素，以获取分配给锚元素的 href 值。然后，我尝试打开和关闭一段 HTML ID 与锚元素的 href 相同的内容。

jQuery(document).ready(function ($) {
      $('.ghb_toggle').hide()
      $('object').on( "load", (evt) => { // wait for the page has fully loaded
        const svg_doc = $("object")[0].contentDocument;
        $('a[xlink\\:href^="#"]', svg_doc )
          .on( "click", (evt) => {
            target = evt.currentTarget.href;
            console.log(target); // for debugging purposes
            $(target).toggle();
          });
      });
});

<object data="/wp-content/uploads/GHB_Interface-v0.1.svg" width="1400" height="1200"></object>

<div class="ghb_toggle" id="gable-pediments">content1</div>
<div class="ghb_toggle" id="gutters-downspouts">content2</div>
<div class="ghb_toggle" id="operable-shades">content3</div>

当我将 href 值分配给我创建的“目标”变量时，我遇到了一个问题。当我在控制台中输出变量 $(target) 的值时：

target = evt.currentTarget.href;
console.log(target);

输出：

SVGAnimatedString {baseVal: "#gutters-downspouts", animVal: "#gutters-downspouts"}

这似乎成功获取了我的锚元素的 href 值！（值应该是“#gutters-downspouts”）。

但是，当我尝试使用 jQuery 来切换相应的 html 元素时，其 ID 与 href 值相同，如下所示：

target = evt.currentTarget.href;
$(target).toggle();

我得到错误：

Uncaught TypeError: Cannot read property 'display' of undefined

我到底做错了什么？好像它认为我的变量是未定义的，但是，我只是在控制台中打印它并看到它有一个值！

【问题讨论】：

jQuery 设计用于 HTML，而不是 SVG。有时 jQuery 确实可以工作（当 SVG 和 HTML 以相同的方式运行时）。通常不会。
在您的 sn-p 中，没有任何 <a> 标记，也没有任何带有 href 的节点。你能更新 sn-p 来演示这个问题吗？
演示问题的示例，而不是整个 SVG。阅读minimal reproducible example。
SVGAnimatedString {baseVal: "#gutters-downspouts", animVal: "#gutters-downspouts"} 不是 jquery 选择器的有效条目 - 如果您使用 .href 获得该条目，请尝试 .href.baseVal
相关，但可能不是直接重复：stackoverflow.com/a/29454358/2181514

标签： javascript html jquery svg

【解决方案1】：

来自 MDN 文档https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString

SVGAnimatedString.animVal 只读这是一个 DOMString 表示动画值。如果给定的属性或属性正在动画它包含属性的当前动画值或财产。如果给定的属性或属性当前不是动画，它包含与 baseVal 相同的值。

SVGAnimatedString.baseVal 这是一个代表基础的 DOMString 价值。在应用任何属性之前给定属性的基值动画。

因此，您已成功获取所需信息，但它看起来像一个包含两个条目的对象。尝试使用 target.baseVal 提取实际目标值

（抱歉，我无法在真实系统上进行测试）。

【讨论】：