firefox 35.0.1:svg掩码动画不';行不通
在我的firefox更新到35.0.1版后,我的svg动画在firefox中无法工作,但在以前的版本中仍然可以工作,并且在firefox beta(36)、nightly(37.0a2)和其他浏览器(opera、chrome、safari、modern ie)中仍然可以工作: html: js(使用snap.svg): 简单示例:firefox 35.0.1:svg掩码动画不';行不通,firefox,animation,svg,mask,snap.svg,Firefox,Animation,Svg,Mask,Snap.svg,在我的firefox更新到35.0.1版后,我的svg动画在firefox中无法工作,但在以前的版本中仍然可以工作,并且在firefox beta(36)、nightly(37.0a2)和其他浏览器(opera、chrome、safari、modern ie)中仍然可以工作: html: js(使用snap.svg): 简单示例:http://jsfiddle.net/7yq14L0f/2/ 你知道为什么吗(这是由Firefox代码中的一个更改引起的,该更改不是完全正确的,然后被修复。这是由Bu
http://jsfiddle.net/7yq14L0f/2/
你知道为什么吗(这是由Firefox代码中的一个更改引起的,该更改不是完全正确的,然后被修复。这是由Bug引起的,Bug被后端口处理,直到Firefox 36修复为止
<svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986 3038.43 55 53.758" enable-background="new -1061.986 3038.43 188.279 53.758" xml:space="preserve">
<g id="logo-mask" >
<rect id="sygnet" fill="#FFFFFF" x="-1100" y="3038" width="100" height="50"/>
</g>
<g id="logo-black">
<rect id="sygnet" fill="#000000" x="-1100" y="3038" width="100" height="50"/>
</g>
</svg>
<div id="button">Click me!</div>
body{
background-color: #777777;
}
#button{
margin-right: 100px;
display: block;
width: 100px;
height: 20px;
float: right;
background-color: #fff;
cursor: pointer;
text-align: center;
line-height: 20px;
}
$(document).ready(function(){
var s = Snap(),
svg = Snap.select('#logo-svg'),
logo = Snap.select('#logo-mask'),
logoBlack = Snap.select('#logo-black'),
mask = svg.rect(-1100, 2830, 280, 100).attr({
fill: 'white',
id: 'maska-logo'
});
logoBlack.attr({'mask': mask, 'opacity': 1});
});
$(document).on('click', '#button', function(){
var maska = Snap.select('#maska-logo');
maska.animate({
transform: 'T'+[0,200]
}, 500);
});