0

次のスニペットは、JEisenbergのSVGEssentialsの例11-9からマイナーな変更を加えて削除されています。

<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="300" height="200" viewBox="0 0 300 200">
      <circle cx="60" cy="60" r="30"
       style="fill: #ff9; stroke: gray; stroke-width:10;">
        <animateColor attributeName="fill"
         begin="0.5s" dur="2s" from="#ff9" to="red" fill="freeze"/>
        <animateColor attributeName="stroke"
         begin="0.5s" dur="2s" from="gray" to="blue" fill="freeze"/>
      </circle>
    </svg>
  </body>
</html>

コードの目的は、塗りつぶしと線の色が2秒の間隔で#ff9黄色と灰色（または）から赤と青（または）に変化する円を表示することです。

Firefoxでこのページにアクセスすると、輪郭が灰色の黄色い円が表示されますが、色が変わることはありません。

意図した効果を達成するために

上記のコードをどのように変更する必要がありますか？



PS：確かに、アイゼンバーグの本はかなり古い（2002）ですが、AFAICTの構文animateColorは、彼が説明したとおりです。また、FWIW、Firefoxは、同じ本から試した他のアニメーションの例を正しく表示します。

4

1 に答える 1

2

<animateColor>は SVG 仕様で推奨されていないため、使用しないでください。幸いなことに、それを置き換えるだけの簡単な修正があります<animate>

于 2013-01-27T18:47:27.010 に答える