0

私は初心者プロジェクトに取り組んでいます.Instagramアイコンにカーソルを合わせると、StackOverflowからコピーしたsvgコードからの色のグラデーションにゆっくりと移行したいと思います. SVG コードが (一般的に) どのように機能するかは理解していますが、トランジションを機能させる方法がわかりません。

必要なコードのスニペットと、これまでに試した css を次に示します。

の終了遷移値fillが問題の原因であると思います。"blue"、またはなどの別の値に変更すると"red"、トランジションは正常に機能します。

.social-container {
	position: absolute;
	bottom: 0;
	color: white;
	border: 1px solid white;
	display: flex;
	width: 150px;
	height: 35px;
	justify-content: space-between;
	align-items: center;
}


svg {
	transition: fill 3s ease;
}

.instagram-logo svg * {
  transition: all 2s ease;
	fill: black;
}

.instagram-logo:hover svg * {
	fill: url(#rg);
}

/* So I noticed the issue is the .instagram-logo:hover svg * {}. When I use a solid color like "blue" for the fill value, the transition works flawlessly. But when using the url, it doesn't work at all */
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<div class="instagram-logo">
  <svg width="0" height="0">
    <radialGradient id="rg" r="150%" cx="30%" cy="107%">
      <stop stop-color="#fdf497" offset="0" />
      <stop stop-color="#fdf497" offset="0.05" />
      <stop stop-color="#fd5949" offset="0.45" />
      <stop stop-color="#d6249f" offset="0.6" />
      <stop stop-color="#285AEB" offset="0.9" />
    </radialGradient>
  </svg>
  <i class="fab fa-instagram fa-2x"></i>
</div>

4

1 に答える 1

1

ブラウザは値の CSS トランジションのサポートを開始したため、CSSから別<color>の へのトランジションを受け入れます。fill: <color>fill: <color>

ただし、この CSSfill値をグラデーションに設定すると、エンジンにとっては<urlFunc>値になり、最終的に値に解決され<image>ます*。したがって、<color>からこの新しい値に移行することはできません。

※この主張はよくわからないのですが…

<filter>1 つの解決策は、CSS値をアニメーション化することです。

.instagram-logo{
  padding: 2px 8px;
}
.instagram-logo svg.fa-instagram path{
  fill: url(#rg);
}

/* from black to color */
.instagram-logo svg.fa-instagram{
  filter: brightness(0%) grayscale(100%);
  transition: filter 2s ease, -webkit-filter 2s ease;
}
.instagram-logo svg.fa-instagram:hover{
  filter: brightness(100%) grayscale(0%);
}

/* from white to color */
.instagram-logo.white{
  background: black;
}
.instagram-logo.white svg.fa-instagram{
  filter: brightness(0%) grayscale(100%) invert(1);
}
.instagram-logo.white svg.fa-instagram:hover{
  /*
    we need to make a new declaration
    because transitions can only be done on func values 
    so we need the same <filterFunc> at both hands of the transition
 */
  filter: brightness(100%) grayscale(0%) invert(0);
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<div class="instagram-logo">
  <svg class="hidden" width="0" height="0" style="position:absolute; z-index:-1">
    <radialGradient id="rg" r="150%" cx="30%" cy="107%">
      <stop stop-color="#fdf497" offset="0" />
      <stop stop-color="#fdf497" offset="0.05" />
      <stop stop-color="#fd5949" offset="0.45" />
      <stop stop-color="#d6249f" offset="0.6" />
      <stop stop-color="#285AEB" offset="0.9" />
    </radialGradient>
  </svg>
  <i class="fab fa-instagram fa-2x"></i>

</div>
<div class="instagram-logo white">
  <i class="fab fa-instagram fa-2x"></i>
</div>

与えられた例では、親ノードにフィルターを設定していることに注意してください。これは、<svg>chrome がプレフィックスなしの内部 SVG ノードでの CSS フィルタリングをまだサポートしていないように見えるためです。

于 2018-03-15T05:39:00.570 に答える