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

Question

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

 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 然后使用与 href 值相同的 ID 切换相应的 html 元素时，如下所示：

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

我收到错误：

Uncaught TypeError: Cannot read property 'display' of undefined

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

Answer 1

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

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

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

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

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