1
このコードの効果は、 'hello'という単語を 'world'という単語とは別の時間に変更することです。これは、Firefoxを除くすべての主要なブラウザで正常に動作します(MacとPC - Firefox iOSアプリで正常に動作します)。 Firefoxでは、「hello」と「world」という単語が同時に表示されます。jQueryを使用してSVGテキスト要素内のリンクの不透明度をFirefoxにアニメーション化させるにはどうすればよいですか?
ご協力いただきありがとうございます、ありがとうございます!
$(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>
代わり
fill-opacity
を使用し、opacity
を使用しないでください:// www.w3.org/TR/SVG11/intro.html#TermGraphicsElement)。代わりにfill-opacityを使用してください。他のUA bugtrackersには、Firefoxとは異なり、仕様を正しく実装していないように見えるので、バグを引き起こす可能性があります。 –