jQuery 选择 <object> 标签内的 SVG 锚点元素

Question

我在使用我的 SVG 中内置的锚元素时遇到了很多麻烦（显示为<object>）。我正在尝试使用 jQuery 将我的对象中的锚点元素作为目标，以便在单击时切换其各自的内容。

如果您看一下我的示例，我的 SVG 中内置了 3 个链接（它们的绿色阴影比其他的更浅）。我使用 InkScape 创建我的 SVG 图像，并且在链接的浅绿色区域上只是 href 属性分别等于“#operable-shades”、“#gutters-downspouts”和“#gable-pediments”的形状。

当我的 SVG 在我的页面上很好地显示（使用标签<object>）时，当将鼠标悬停在我创建的链接上时，我得到原始对象数据 URL，并在其末尾附加了我指定的锚点（例如“https://example.com” /wp-content/uploads/GHB_Interface-v0.1.svg#gable-pediments') 当我期望它是'https://example.com/#gable-pediments'。

<script type="text/javascript">

jQuery(document).ready(function($) {

    $('.ghb_toggle').hide()

    $('a[href^="#"]').on('click', function(event) {

        var target = $(this).attr('href');

        $(target).toggle();

    });

});

</script>

.ghb_toggle {

  display:none;

}

<object type="image/svg+xml" data="https://example.com/wp-content/uploads/test.svg" width="500" height="400"></object>

<div id="gable-pediments" class="ghb_toggle">

  <p>Content 1</p>

</div>

<div id="gutters-downspouts" class="ghb_toggle">

  <p>Content 2</p>

</div>

<div id="operable-shades" class="ghb_toggle">

  <p>Content 3</p>

</div>

我怎样才能修改我的 jQuery 以便能够成功地与我内部的锚元素交互<object>以隐藏/显示具有唯一标识符的相应内容？

Answer 1

<object>要定位在, 或中加载的 svg 文档的内容<iframe>，您需要将正确的文档上下文传递给 jQuery：您可以从.contentDocument嵌入元素的属性访问的上下文。请注意，这要求 svg 文档以同源方式加载，这在 StackSnippets 的空源帧中是不可能的，所以这里是一个实时的 plnkr。$( "object" ).on( "load", (evt) => {  const svg_doc = this.contentDocument;  $( "a[href]", svg_doc ) // second argument is context    .on( 'click', (evt) => {      // add your listener here    } );};另请注意，在您的 svg 中，您xlink:href定义了属性，而不仅仅是href，因此您的 jQuery 选择器应该是'a[xlink\\:href^="#"]'但是，如果您的目标是将 svg 中的锚点设置为相对于其他基本 URL 而不是从中加载文档的基本 URL，那么您不需要所有这些，您可以简单地在 svg 文档的开头插入一个 HTML<base>元素并且所有相对 URL 都将使用它。将现场演示视为plnkr和更复杂的片段：// To be able to embed it in a StackSnippet (directly in this answer),// we need to generate the file in memory from JS// you don't need itconst svg_content = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="300" >  <!-- we must declare it in the HTML namespace -->  <base xmlns="http://www.w3.org/1999/xhtml" href="https://google.com" />  <a href="#foo-bar">    <rect fill="green" x="10" y="10" width="30" height="30" />  </a></svg>`;const svg_blob = new Blob( [ svg_content ], { type: "image/svg+xml" } );const svg_url = URL.createObjectURL( svg_blob );document.querySelector( "object" ).data = svg_url;<object></object>