jQuery 选择器 + SVG 不兼容？

Question

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

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

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

问题是什么？

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

Answer 1

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

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

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 对象的包装器，使它们看起来像 HTML DOM 到 jQuery。我将它与 jQuery-UI 一起使用，使我的 SVG 元素可放置。

HTML 和 SVG 之间缺乏 DOM 互操作性是一场彻底的灾难。所有为 HTML 编写的实用程序库都必须针对 SVG 进行重新设计。

Answer 2

你可以使用 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>

Answer 3

有时我不明白......但实际上它不适用于类选择器。如果您使用 id $("#mysvg") 或元素 $("svg") 它确实有效！奇怪......

只有当您将 onClick 脚本从标题移动到 svg 元素之后的正文时，它才有效！ jquery只能在绑定之前声明元素时才能绑定onclick。

Answer 4

您必须使用从 div 到 SVG 元素的 CSS 路径才能单击对象
按照下面的例子：

$('div#layout > svg > #line').click()