jQuery在< object>中选择SVG锚元素.标签 [英] jQuery select SVG anchor elements inside <object> tag

问题描述

使用内置在SVG中的锚元素(显示为< object> )时，我遇到了很多麻烦.我试图用jQuery定位对象中的锚元素，以在单击时切换其各自的内容.

如果您看一下我的示例，我的SVG中内置了3个链接(它们的绿色阴影比其他颜色浅).我使用InkScape创建了SVG图像，并且链接的浅绿色区域上的形状仅仅是href属性等于#operable-shades"，#gutters-downspouts"和#gable-pediments"的形状;分别.

我的SVG在页面上很好地显示(使用< object> 标记)，当将鼠标悬停在我创建的链接上时，我得到了原始对象数据URL，并将指定的锚点附加到了当我期望它是'https://example.com/时(例如'https://example.com/wp-content/uploads/GHB_Interface-v0.1.svg#gable-pediments')#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 {显示:无；}  

 <对象类型="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>内容1</p></div>< div id ="gutters-downspouts" class ="ghb_toggle">< p>内容2</p></div>< div id ="operable-shades" class ="ghb_toggle">< p>内容3</p></div>  

如何修改jQuery，使其能够与我的< object> 中的锚点元素成功交互，以隐藏/显示具有唯一标识符的相应内容?

解决方案

以定位在< object> 或< iframe> 中的svg文档的内容为目标code>，您需要将正确的Document上下文传递给jQuery:可以从嵌入元素的 .contentDocument 属性访问的上下文.

请注意，这要求svg文档已以相同的方式加载，这在StackSnippets的null原始框架中是不可能的，因此这是 $("object").on("load"，(evt)=> {const svg_doc = this.contentDocument;$("a [href]"，svg_doc)//第二个参数是上下文.on('click'，(evt)=> {//在此处添加您的听众})；};

还请注意，在您的svg中，您定义了 xlink:href 属性，而不仅仅是 href ，因此您的jQuery选择器应为'a [xlink \\:href ^ ="#]'

---

但是，如果您的目标是在svg中相对于其他基础URL设置锚点，而不是从文档中加载该基础URL，那么您不需要所有这些，您只需插入HTML <svg文档开头的base> 元素，所有相关URL都将使用它.
观看实时演示 plnkr 和更复杂的代码段:

 //为了能够将其嵌入StackSnippet中(直接在此答案中)，//我们需要从JS生成内存中的文件//您不需要const svg_content =`< svg xmlns ="http://www.w3.org/2000/svg" viewBox ="0 0 50 50" width ="300"><！-我们必须在HTML命名空间中声明它->< 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]，{类型:"image/svg + xml"});const svg_url = URL.createObjectURL(svg_blob);document.querySelector("object").data = svg_url;  

 < object></object>  

I am having quite a bit of trouble using the anchor elements built into my SVG (displayed as an <object>). I am trying to target the anchor elements within my Object with jQuery to toggle its respective piece of content when clicked.

If you take a look at my example, I have 3 links built into my SVG (they are a lighter shade of green than the others). I used InkScape to create my SVG image, and on the light green areas that are linked are just shapes with the href attribute equal to "#operable-shades", "#gutters-downspouts", and "#gable-pediments" respectively.

With my SVG displaying nicely on my page (using an <object> tag), when hovering over the links I have created I get the original object data URL with my specified anchor appended to the end of it (ex. 'https://example.com/wp-content/uploads/GHB_Interface-v0.1.svg#gable-pediments') when I would expect it to be '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>

How can I modify my jQuery to be able to successfully interact with my anchor elements inside my <object> to hide/show a respective piece of content with a unique identifier?

解决方案

To target the content of an svg document loaded inside an <object>, or <iframe>, you need to pass the correct Document context to jQuery: the one you can access from the .contentDocument property of the embedding element.

Note that this requires that the svg document has been loaded in a same-origin way, which is not possible in StackSnippets' null origined frames, so here is a live 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
    } );
};

Also note that in your svg you have xlink:href attributes being defined, not just href, so your jQuery selector should be 'a[xlink\\:href^="#"]'

---

But if your goal is to set the anchors in you svg relative to an other base URL than the one the document is loaded from, then you don't need all this, you can simply insert an HTML <base> element at the beginning of your svg document and all the relative URLs will use it.
See live demo as a plnkr and a more complicated snippet:

// 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 it
const 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>

这篇关于jQuery在< object>中选择SVG锚元素.标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！