web-dev-qa-db-ja.com

CSSアニメーションを使用したSVG円半径のサイズ変更

CSSでSVGサークルのradius属性をアニメーション化しようとしています。 （Firefox Inspect Elementツールを使用して）アニメーション自体が正しく設定および実行されているのを確認できますが、「。innerCircle」のサイズは目に見えて変化しません。

私が明らかに見逃したものを見つけたり、何らかの形で助けたりすることができるなら、私は非常に感謝しています。私はこれにかなり慣れていないので、私がこれを間違ってしまった場合は、親切にしてください！

参照用にファイルを貼り付けました。

再度、感謝します。

@keyframes buttonTransition {
  from {
    r: 5%;
  }
  to {
    r: 25%;
  }
}

.innerCircle {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: buttonTransition;
}
<html>
  <head>
    <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
  </head>
  <body>
    <svg class = "button" expanded = "true" height = "100px" width = "100px">
      <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
      <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
    </svg>
  </body>
</html>
htmlcsssvgcss-animations
12
Nathan Russell

SVG 1.1では、円の半径は 属性 であり、 CSSプロパティ ではありません。

CSSアニメーションはCSSプロパティをアニメーション化し、属性はアニメーション化しません。

FirefoxはSVG 2仕様のこの部分を実装したので、質問が書かれたときは機能しませんでしたが、質問のテストケースは今は機能します。

SMILアニメーションは、これらのUAの属性（およびCSSプロパティ）でも機能します。

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

今後の未完成のSVG 2仕様では、ほとんどの属性がCSSプロパティになることが示唆されているため（これは主にあなたのようなユースケースが機能しないため）、地平線上の解決策があります。 Chromeは、これを実装してすでに可能かどうかを確認しています。これがアニメーションがそこで機能する理由です。その後、ある時点で、FirefoxとSafariがこのSVG 2機能も実装する可能性があります。

10
Robert Longson

単純な代替策があります。円の半径ではなく、要素のスケールをアニメーション化します。 2018年の時点では、Edgeとすべての最新ブラウザーでサポートされています。

SMILアニメーションは非推奨であり、従来の理由でブラウザーでのみサポートされています。将来的には削除される可能性があり、Edgeまたは一部の将来のブラウザには表示されなくなります。

@keyframes buttonTransition {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
    transform-Origin: center center;
}
<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
        </svg>
    </body>
</html>
7
Evgeny

誰かがまだこれを行う方法を検討している場合、SMILを使用せずに塗りつぶされた円のかなり良い解決策を見つけました。この解決策は少しハックであり、塗りつぶされた円でのみ機能します。基本的に私がやったことは、これらの円のストローク幅をアニメーションして、まるで成長しているように見せることでした。

私の元のサークル

<circle cx="46" cy="46" r="2.8"/>

これを機能させるには、円の半径を0に近くなるように設定します。

<circle cx="46" cy="46" r="0.01"/>

次に、ストローク幅を元の半径の2倍に設定し、最後にストローク幅のアニメーションを設定します。

@keyframes circle_animation {
    from {
        stroke-width: 0;
    }
}

circle {
    stroke-width: 5.6;
    animation: circle_animation .5s linear infinite;
}
1
Bryce Meyer