javascript - jQuery 选择器 + SVG 不兼容？

Question

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

我希望在用户单击任意位置时弹出一个框，并且当用户单击不是该框的某个位置时该框消失。这意味着我无法使用有效的 $(window).click()。

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

问题是什么？

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

Answer 1

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

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

svg.className.baseVal

受此影响的属性是

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

这些动画属性是结构体，其中 baseVal 包含您在 HTML DOM 中找到的相同值，animatedVal 包含我不确定的内容。

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

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

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

我写了一个小的 jQuery 扩展，它包装了 SVG 元素，使它们看起来更像 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 元素可以放置。

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