【问题标题】:Namespace selector with jquery not possible after update jquery after version 1.7.2在版本 1.7.2 之后更新 jquery 后,无法使用 jquery 的命名空间选择器
【发布时间】:2016-10-17 06:27:08
【问题描述】:

我尝试使用 jquery 选择命名空间元素,如下所示:

var $svg = $('svg');
var $elements = $('a[xlink\\|href]', $svg);  // Select only a xlink attributes inside svg object
var $allelements = $('a[*|href]', $svg);  // Select all a href attributes inside svg object

使用 jquery v1.7.2 这工作。对于更高版本(v1.8.3 和更高版本),这不再起作用。有谁知道我现在如何使用 jquery 选择命名空间属性。?或者这是 jquery 中的一个错误?

示例 svg: https://jsfiddle.net/frontendplace/wytfoq3q/

【问题讨论】:

  • 只有$allelements 应该找到一些东西。我猜你的第一个意思是a[xlink\\:href]。 (虽然现在无法测试 jQuery 问题)。

标签: javascript jquery svg namespaces


【解决方案1】:

对于$elements,您可以使用.filter()attributes .getNamedItem() 和参数"xlink:href";对于$allelements,你可以使用$("a[href]", $svg);

var $svg = $("svg");
// Select only a xlink attributes inside svg object
var $elements = $("a", $svg).filter(function() {
  return this.attributes.getNamedItem("xlink:href") !== null
});
// Select all a href attributes inside svg object
var $allelements = $("a[href]", $svg);

console.log("svg", $svg);
console.log("elements", $elements, $elements[0]);
console.log("all elements", $allelements, $allelements[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5cm" height="3cm" viewBox="0 0 5 3">
  <desc>Example link01 - a link on an ellipse
  </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" fill="none" stroke="blue" stroke-width=".03" />
  <a xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" />
  </a>
  <a href="#">anchor</a>
</svg>

jsfiddle https://jsfiddle.net/wytfoq3q/3/

【讨论】:

  • 我仍然无法测试,但是您在 svg 中的 HTMLAnchor 使您的 svg 无效。 SVGAnchor 不能像那样拥有 textNode。
  • @Kaiido “你在 svg 中的 HTMLAnchor 使你的 svg 无效”?没有撰写svg。仅发布关于选择元素。需要改变什么?
  • 啊,我看到它在 OP 的代码中。 textNode 至少应包含在 SVGText (&lt;text&gt;) 元素中。
  • @Kaiido 更新了 stacksn-ps 以将 &lt;text&gt; 包含在 &lt;a&gt;
  • 谢谢这回答了我的问题
猜你喜欢
  • 2016-07-16
  • 1970-01-01
  • 2012-10-10
  • 2011-01-04
  • 2017-10-03
  • 1970-01-01
  • 2011-11-05
  • 1970-01-01
相关资源
最近更新 更多