jQuery 选择器 + SVG 不兼容? [英] jQuery Selector + SVG Incompatible?

问题描述

我一直在处理带有内联 SVG 和 javascript 动画的 HTML5 文档.

I've been working with an HTML5 document with inline SVG and javascript animation.

我希望在用户点击任何地方时弹出一个框，当用户点击某个不是框的地方时，我希望框消失.这意味着我不能使用 $(window).click()，这是有效的.

I'd like to have a box pop up when the user clicks anywhere, and I'd like the box to go away when the user clicks somewhere that isn't the box. This means I can't use $(window).click(), which works.

我尝试通过给它们类名并使用 $(".svgclassname").click() 来选择顶部的 SVG，但这似乎不起作用.也不能使用 $("#svgname").click() 选择单个的.

I've tried selecting the SVGs on top by giving them class names and using $(".svgclassname").click(), but this doesn't seem to work. Neither does selecting individual ones with $("#svgname").click().

有什么问题?

(当我用 $(window) 替换 $(".eyesvg") 时，当用户单击窗口中的任意位置时，光标附近会出现一个蓝色框.)

(When I replace $(".eyesvg") with $(window), a blue box appears near the cursor when the user clicks anywhere in the window.)

推荐答案

发生这种情况是因为 SVG DOM 规范与 HTML DOM 有很大不同.

This happens because SVG DOM spec differs a lot from HTML DOM.

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

SVG DOM is a different dialect, and some properties have same names but mean different things. For example, to get the className of an svg element, you use:

svg.className.baseVal

受此影响的属性是

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

这些 Animated 属性是结构体，baseVal 持有与 HTML DOM 相同的值，而 animatedVal 持有我不确定是什么.

These Animated properties are structs, with baseVal holding the same value you'd find in HTML DOM and animatedVal holding I am not sure what.

SVG DOM 也缺少一些依赖的属性库，例如 innerHTML.

SVG DOM is also missing some properties libraries depend on, such as innerHTML.

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

This breaks jQuery in many ways, anything that depends on above properties fails.

总的来说，SVG DOM 和 HTML DOM 不能很好地混合.他们一起工作足以引诱你进入，然后事情悄悄地破裂，另一个天使失去了翅膀.

In general, SVG DOM and HTML DOM do not mix very well. They work together just enough to lure you in, and then things break quietly, and another angel loses its wings.

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

I wrote a little jQuery extension that wraps SVG elements to make them look more like 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);

它为 SVG 对象创建了一个包装器，使它们看起来像 jQuery 的 HTML DOM.我已经将它与 jQuery-UI 一起使用，使我的 SVG 元素可放置.

It creates a wrapper around SVG objects that makes them look like HTML DOM to jQuery. I've used it with jQuery-UI to make my SVG elements droppable.

HTML 和 SVG 之间缺乏 DOM 互操作性是一场彻头彻尾的灾难.所有为 HTML 编写的实用程序库都必须为 SVG 重新发明.

The lack of DOM interoperability between HTML and SVG is a total disaster. All the sweet utility libraries written for HTML have to be reinvented for SVG.

这篇关于jQuery 选择器 + SVG 不兼容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！