将类（fancybox）分配给 SVG 元素答案

【问题标题】：Assign class (fancybox) to SVG element将类（fancybox）分配给 SVG 元素
【发布时间】：2013-01-15 18:04:30
【问题描述】：

我正在尝试将类 (video.js) 分配给 SVG 元素。不知何故，这个类被禁用了。我在下面的尝试不起作用。

<a class="video" xlink:href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;
autoplay=1" title="The Falltape"><circle cx="168" cy="79" r="59" fill="green" />
</a>

当我将它与一些纯文本放在一起时，它工作正常，没有 SVG-circle

<a class="video" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?
fs=1&amp;autoplay=1"><img src="images/1.jpg" alt="" />TEXT</a>

链接到 video.js

Query(document).ready(function() {

$(".video").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 853,
        'height'        : 480,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
        'wmode'         : 'transparent',
        'allowfullscreen'   : 'true'
        }
    });

    return false;
  });
});

有什么建议吗？

【问题讨论】：

标签： css svg fancybox

【解决方案1】：

不要把class属性放到XLink命名空间，把href属性放到XLink命名空间：

<a class="video" xlink:href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;
autoplay=1" title="The Falltape"><circle cx="168" cy="79" r="59" fill="green" />
</a>

确保围绕它的 SVG 也是正确的。

【讨论】：

我尝试过建议（然后删除了答案，因为它无处可去）。他实际上在类和fancybox方面遇到了一些jquery问题，大概是因为在SVG中类属性是可动画的，而jquery不理解它与HTML不同。
感谢 Tomas，尽管 Robert 提出了这个建议，但不知何故它不起作用。它必须与 jquery 和 svg-elements 有关。有什么方法可以在不使用类的情况下将 jquery 分配给 svg 元素？
@Sebastian：如果您的第一个代码示例中的错误命名空间不是问题，也许可以纠正它，以免导致错误假设。