SVG + css3动画不工作与链接标记 [英] SVG + css3 animation not working with link markup
问题描述
您好！
我一直在阅读来自Chris Coyer的真棒文章Using SVG （ http://css-tricks.com/using-svg/ ），并决定使用一些东西来制作动画标志。但我有点战斗。我会解释。
I've been reading the awesome article "Using SVG" from Chris Coyer (http://css-tricks.com/using-svg/), and decided to use some things to make an animated logo. But I'ts been a little fight. I'll explain.
我使用的是 .svg 标志文件。我使用< object> 标签在html文件中拉取文件。在SVG文件中，我使用 css3 animations 对svg中的对象执行一些操作。
I'm using an .svg file for the logo. I'm pulling the file in an html file using the <object> tag. Inside the SVG file, I'm using css3 animations to do some tricks with the objects inside the svg.
使用svg文件与css3动画和< object> 标记工作正常。但是，当我尝试将此内部放在< a> 标记中时，问题就开始了。我使用了一个技巧指向JohanHernández对文章的评论（我不知道诀窍的起源），在这个小提琴中举例说明： http://jsfiddle.net/WEbGd/ 。
Using the svg file with css3 animations and the <object> tag is working good. But the problem starts when I try to put this inside a <a> tag. I'm using a trick pointed at the Johan Hernández' comment on the article (I don't know the origin of the trick), and exemplified in this fiddle: http://jsfiddle.net/WEbGd/.
问题是， ，链接工作，但不是SVG内的css3动画。我知道这是因为 z-index 技巧...但我没有找到一个更好的aproach这个。
The problem is, with that, the link works, but not the css3 animations inside the SVG. I know it's because the z-index trick... but I didn't found yet a better aproach for this.
也许有人有建议做这项工作，或至少为另一种方法？我用笔帮助我理解我在做什么： http://codepen.io/seraphzz/pen/ CJrBp 。
Maybe somebody have a suggestion to make this work, or at least for another approach? I made a Pen to help understand what I'm doing: 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" width="176.5px" height="63.9px" 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" width="63.9" height="63.9" class="style3"/>
<ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
</svg>
任何帮助都将是非常欢迎的！
Any help would be very welcome!
谢谢！
经过一番研究，我没有找到一个可能和干净的解决方案这只与css3和html5。所以我给一个javascript的一个镜头。我用一些javascript做了前一笔的一个分支，这里是我到现在为止： http： //codepen.io/seraphzz/pen/lxKAw
After some research, I didn't found a possible and clean solution for this with only css3 and html5. So I'm giving a shot with a bit of javascript. I've made a fork of the previous pen with some javascript, here's what I'm getting until now: http://codepen.io/seraphzz/pen/lxKAw
我要做的是使用Javascript访问SVG的内部DOM。我在Chrome上使用 .contentDocument 访问内容时出现问题，可能是由文件来源策略引起的（Chrome调试返回此错误：阻止具有原点http://s.codepen.io的框架访问具有原点http://favolla.com.br的框架。协议，域和端口必须匹配。。
What I'm trying to do is access the inner DOM of the SVG with Javascript. I'm having a problem accessing the content with .contentDocument on Chrome, witch may be caused by the file origin policy (the Chrome debug is returning this error: 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..
我的想法是在SVG文件中访问一个具有一些id的元素，然后使用javascript更改元素的类。 .addClass ，例如。添加的类在.svg文件中（上面编辑）。
My idea here is access an element inside the SVG file with some id, and then, with javascript, change the class of the element with .addClass, for example. The class added is inside the .svg file (edited above).
这个方法？
推荐答案
这个可以使用纯CSS3和HTML5，使用目标设置为父的xlink元素链接在 svg中：
This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="../index.html" target="_parent">
<rect id="one" width="63.9" height="63.9" 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.htmltarget =_ parent> < / a>
注意：此方法仅使用< object> 嵌入SVG的方法。
Note: This method has only been tested using the <object> method of embedding the SVG.
这篇关于SVG + css3动画不工作与链接标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
