jQuery Selector + SVG不兼容？

我一直在使用内嵌SVG和JavaScriptanimation的HTML5文档。

我想在用户点击任何地方时popup一个框，并且当用户单击某个不是框的地方时，我希望框消失。 这意味着我不能使用$(window).click() ，这是$(window).click() 。

我已经试过selectSVG顶部给他们类名称和使用$(".svgclassname").click() ，但这似乎不工作。 也没有用$("#svgname").click()来select单个的。

问题是什么？

（当我用$(window)replace$(".eyesvg")时，当用户点击窗口中的任何位置时，光标附近会出现一个蓝框。

Answer 1

发生这种情况是因为SVG DOM规范与HTML DOM差别很大。

SVG DOM是一种不同的方言，有些属性名称相同，但含义不同。 例如，要获取svg元素的className，可以使用：

 svg.className.baseVal 

受此影响的合适的是

 className is SVGAnimatedString height,width, x, y, offsetWidth, offsetHeight are SVGAnimatedLength 

这些animation属性是结构体， baseVal保持着你在HTML DOM中find的相同的值， animatedVal控制着我不知道是什么的结果。

SVG DOM还缺less一些属性库所依赖的属性，如innerHTML 。

这在很多方面打破了jQuery，依赖于上述属性的任何东西都失败了。

一般来说，SVG DOM和HTML DOM混合不好。 他们一起工作就足以引诱你，然后事情就会平静下来，另一位天使失去了翅膀。

我写了一个包装SVG元素的小jQuery扩展，使它们看起来更像HTML DOM

 (function (jQuery){ function svgWrapper(el) { this._svgEl = el; this.__proto__ = el; Object.defineProperty(this, "className", { get: function(){ return this._svgEl.className.baseVal; }, set: function(value){ this._svgEl.className.baseVal = value; } }); Object.defineProperty(this, "width", { get: function(){ return this._svgEl.width.baseVal.value; }, set: function(value){ this._svgEl.width.baseVal.value = value; } }); Object.defineProperty(this, "height", { get: function(){ return this._svgEl.height.baseVal.value; }, set: function(value){ this._svgEl.height.baseVal.value = value; } }); Object.defineProperty(this, "x", { get: function(){ return this._svgEl.x.baseVal.value; }, set: function(value){ this._svgEl.x.baseVal.value = value; } }); Object.defineProperty(this, "y", { get: function(){ return this._svgEl.y.baseVal.value; }, set: function(value){ this._svgEl.y.baseVal.value = value; } }); Object.defineProperty(this, "offsetWidth", { get: function(){ return this._svgEl.width.baseVal.value; }, set: function(value){ this._svgEl.width.baseVal.value = value; } }); Object.defineProperty(this, "offsetHeight", { get: function(){ return this._svgEl.height.baseVal.value; }, set: function(value){ this._svgEl.height.baseVal.value = value; } }); }; jQuery.fn.wrapSvg = function() { return this.map(function(i, el) { if (el.namespaceURI == "http://www.w3.org/2000/svg" && !('_svgEl' in el)) return new svgWrapper(el); else return el; }); }; })(window.jQuery); 

它创build了一个SVG对象的包装器，使得它们看起来像HTML DOM到jQuery。 我用jQuery-UI来使我的SVG元素可以放置。

HTML和SVG之间缺乏DOM互操作性是一场灾难。 为HTML编写的所有甜蜜实用程序库都必须重新创buildSVG。

Answer 2

有时我不明白…但实际上它不适用于类select器。 如果你使用id $（“＃mysvg”）或元素$（“svg”），它确实可行！ 奇怪….

而且只有在你将onClick脚本从标题移动到svg元素之后才能使用！ jquery只能在绑定之前声明元素时绑定onclick。

Answer 3

你可以使用jquery-svg插件，就像一个魅力：

 <script> //get svg object, like a jquery object var svg = $("#cars").getSVG(); //use jquery functions to do some thing svg.find("g path:first-child()").attr('fill', color); </script>