SVG + css3 动画不适用于链接标记

Posted 2023-03-06

【中文标题】SVG + css3 动画不适用于链接标记

【英文标题】：SVG + css3 animation not working with link markup

【发布时间】：2013-05-26 15:30:11

【问题描述】：

大家好！

我一直在阅读 Chris Coyer (http://css-tricks.com/using-svg/) 的精彩文章 “使用 SVG”，并决定使用一些东西来制作动画徽标。但我一直在打架。我会解释的。

我正在为徽标使用 .svg 文件。我正在使用<object> 标记将文件拉到一个html 文件中。在 SVG 文件中，我使用 css3 动画 对 svg 中的对象进行一些技巧。

使用带有 css3 动画的 svg 文件和 <object> 标签效果很好。但是当我尝试将其放入 <a> 标记时，问题就开始了。我正在使用指向 Johan Hernández 对文章的评论的技巧（我不知道技巧的起源），并且在这个小提琴中举例说明：http://jsfiddle.net/WEbGd/。

问题在于，链接有效，但 SVG 内的 css3 动画无效。我知道这是因为 z-index 把戏......但我还没有找到更好的方法。

也许有人建议让这项工作发挥作用，或者至少是另一种方法？我做了一支笔来帮助理解我在做什么：http://codepen.io/seraphzz/pen/CJrBp。

这是我为测试目的制作的 svg 代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"   viewBox="0 0 176.5 63.9" enable-background="new 0 0 176.5 63.9" xml:space="preserve" id="logo-svg">
<style>
    .style3
        fill:   #9F4400;
    
    .style4
        fill:   #9331D3;
    
    
    #logo-svg, #one
        -webkit-transform-origin: center center;
           -moz-transform-origin: center center;
             -o-transform-origin: center center;
            -ms-transform-origin: center center;
                transform-origin: center center;
        -webkit-transition: all .2s ease-in-out;
           -moz-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
    
    
    #logo-svg
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
             -o-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
    
    
    #logo-svg:hover
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
             -o-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);    
    
    
    #one
        -webkit-animation: one .3s ease-in-out;
        -webkit-animation-play-state: paused
        -moz-animation: one .3s ease-in-out;
        -moz-animation-play-state: paused;
        -o-animation: one .3s ease-in-out;
        -o-animation-play-state: paused;
    
    
    /*.active class added for test purposes*/
    #logo-svg:hover #one, #one.active
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
    
    
    @-webkit-keyframes one
        0%,50%,100%-webkit-transform: rotate(0deg);
        25%,75%-webkit-transform: rotate(10deg);
    
    @-moz-keyframes one
        0%,50%,100%-moz-transform: rotate(0deg);
        25%,75%-moz-transform: rotate(10deg);
    
    @-o-keyframes one
        0%,50%,100%-o-transform: rotate(0deg);
        25%,75%-o-transform: rotate(10deg);
    
    
</style>
<rect id="one"   class="style3"/>
<ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
</svg>

非常欢迎任何帮助！

谢谢！

编辑：

经过一些研究，我没有找到一个可能且干净的解决方案，仅使用 css3 和 html5。因此，我正在尝试使用一些 javascript。我已经用一些 javascript 对以前的笔做了一个叉子，这是我到目前为止得到的：http://codepen.io/seraphzz/pen/lxKAw

我想要做的是使用 Javascript 访问 SVG 的内部 DOM。我在 Chrome 上使用 .contentDocument 访问内容时遇到问题，这可能是由文件源策略引起的（Chrome 调试返回此错误：Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://favolla.com.br". Protocols, domains, and ports must match.。

我的想法是使用一些 id 访问 SVG 文件中的元素，然后使用 javascript，例如使用 .addClass 更改元素的类。添加的类在 .svg 文件中（上面已编辑）。

你们如何看待这种方法？

【问题讨论】：

我认为a标签不能包含object标签。

w3.org/TR/2011/WD-html5-20110113/… "内容模型：透明，但不能有交互式内容后代。" object 标签是交互式内容。它可能是 WebKit 的侥幸，它不会将对象标签从 a 标签下移出......您可能必须尝试将它放在与 a 标签相邻的地方，也许是 z-index 锚点在对象，并尝试 a:hover+object 作为选择器或其他东西。

@JayC 感谢您提供有关<a> 标签的建议和可靠信息！我会调查一下，如果我有任何进展，我会在这里发布。

【参考方案1】：

这可以使用纯 CSS3 和 HTML5 来完成。诀窍是通过使用 xlink 元素将链接 inside 嵌入到 svg 中，并将目标设置为 parent：

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../index.html" target="_parent">
        <rect id="one"   class="style3"/>
        <ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
    </a>
</svg>

两个重要的位：

xmlns:xlink="http://www.w3.org/1999/xlink" 命名空间。

实际链接：<a xlink:href="../index.html" target="_parent"> </a>

注意：此方法仅使用嵌入 SVG 的 <object> 方法进行了测试。

【讨论】：

太棒了，@Caleb！这正是我想要的。我认为它符合我的需求，因为我正在使用 <object> 标签嵌入 svg，就像你说的那样。谢谢！

不客气@Diego，很高兴我能帮上忙！前几天我刚刚发现了这一点，因为我试图做和你一样的事情，而 Google 没有提供任何帮助。

似乎也可以通过直接嵌入来工作（没有

我无法在 Safari 中使用此功能，但此处显示的同级方法有效：***.com/a/22595572/1481076