如何讓Firefox使用jQuery爲SVG文本元素中的鏈接的不透明度設置動畫效果？

此代碼所需的效果是讓單詞'hello'在不同的時間更改爲不透明的字詞'world'。這適用於除Firefox以外的所有主流瀏覽器（Mac和PC - 它在Firefox iOS應用上運行良好）。在Firefox中，「hello」和「world」這兩個詞同時可見。如何讓Firefox使用jQuery爲SVG文本元素中的鏈接的不透明度設置動畫效果？

任何幫助非常感謝，謝謝！

$(document).ready(function() { 
 
    $('svg').delay(0).fadeIn(1000); 
 
    $('#hello').delay(800).animate({ 
 
     opacity: "0.80" 
 
    }, 1100); 
 
    $('#world').delay(1100).animate({ 
 
     opacity: "0.80" 
 
    }, 1750); 
 

 
    });

svg { 
 
    fill: black; 
 

 
} 
 
#hello, 
 
#world { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
 

 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <text x="50%" y="78%"> 
 
    <a id='hello'>Hello </a> 
 
    <a id='world'>world</a> 
 
    </text> 
 
</svg>

來源

2016-09-20 Ash Thomas

透明度應用於圖形元素，不是一個（https：//開頭www.w3.org/TR/SVG11/intro.html#TermGraphicsElement）。改用fill-opacity。你可以在其他UA漏洞發起者身上發現一個bug，因爲它們看起來並不像Firefox那樣正確地實現規範。 –

不要使用opacity，使用fill-opacity代替

$(document).ready(function() { 
 
    $('svg').delay(0).fadeIn(1000); 
 
    $('#hello').delay(800).animate({ 
 
    fillOpacity: "0.80" 
 
    }, 1100); 
 
    $('#world').delay(1100).animate({ 
 
    fillOpacity: "0.80" 
 
    }, 1750); 
 

 
});

svg { 
 
    fill: black; 
 
} 
 
#hello, 
 
#world { 
 
    fill-opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <text x="50%" y="78%"> 
 
    <a id='hello'>Hello </a> 
 
    <a id='world'>world</a> 
 
    </text> 
 
</svg>

來源

2016-09-20 15:23:16

如何讓Firefox使用jQuery爲SVG文本元素中的鏈接的不透明度設置動畫效果？

回答

相關問題