css - 将类 (fancybox) 分配给 SVG 元素

Question

我正在尝试将类 (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 圆圈的纯文本放在一起时它工作正常

<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;
  });
});

有什么建议吗？

Answer 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 也是正确的。