使用過渡時，SVG濾鏡不會在懸停時消失

Question

我目前正在研究一些新東西，並且已經向我介紹了SVG對象的世界。 他們很好。 無論如何，我都有一個已建立的按鈕，並在其上放置了一個過濾器。 我正在使用的設計器希望濾鏡（陰影）在懸停時從不透明度1變為0，並在懸停時返回1。

我只在濾鏡上嘗試了正常的過渡，但我可以使濾鏡消失，但過渡遠非平滑。

這是我的代碼：

html

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" style="enable-background:new 0 0 216 216;" xml:space="preserve">
  <filter id="fade" height="150%" width='150%'>
     <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <filter id="dropshadow" height="150%" width='150%'>
    <feGaussianBlur in="SourceAlpha" stdDeviation="25" />
    <!-- stdDeviation is how much to blur -->
    <feOffset dx="0" dy="15vh" result="offsetblur" />
    <!-- how much to offset -->
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.4" />
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <a href='' id='playvideo_button'>
    <g>
      <path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
      <polygon class="st1" points="92,140 92,76 140,108" />
    </g>
  </a>
</svg>

CSS

svg {
  width: 30vw;
  height: 30vh;
  cursor: pointer;

}

svg .st0 {
  fill: #4982CF;
  transition: filter.6s ease-out;
  filter: url(#dropshadow);
}
svg .st1 {
  fill: #ffffff;

}
svg:hover .st0{
  filter: url(#fade);
}

這里也是我一直在玩的小提琴的鏈接，如果需要任何其他資源，請告訴我！ 預先感謝您的協助。

https://jsfiddle.net/sfza69ry/7/

編輯

我創建了第二個濾鏡，它只是一個透明的疊加層，但是也失敗了，並且效果不一樣。

我在這里很茫然。

Answer 1

在過濾器上使用過渡效果並非如此。 這是一種更優雅的方法。 這里有很多事情要注意：

• 您需要適當調整svg和濾鏡區域的大小，以確保陰影不會被切除
• 您無法轉換過濾器
• SVG過濾器內部無法可靠地支持CSS單元，請堅持objectBoundingBox（％）或userSpaceOnUse（viewbox）單元

• 看看我如何構造過濾器，以使其能夠在形狀的頂部繪制（捕獲懸浮）而不會使其模糊。 那就是過濾器的“ operator =” out“部分。

• 將過濾器包含在defs元素中。 一些瀏覽器需要這樣做。

• 不要將Illustrator導出用作樣板。 它們實際上不是構造良好的SVG。

通常，學習SVG的最糟糕方法是嘗試解碼或調整Illustrator導出代碼。 這只是一場徹底的災難性災難。

 svg { width: 30vw; height: 30vh; cursor: pointer; } svg .st0 { fill: #4982CF; } svg .st1 { fill: #ffffff; } #usedshadow { opacity: 1; transition: opacity 0.6s; } #usedshadow:hover { opacity: 0; transition: opacity 0.6s; } 

 <svg version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300"> <defs> <filter id="dropshadow" x="-50%" y="-50%" height="200%" width='200%'> <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> <!-- stdDeviation is how much to blur --> <feOffset dx="0" dy="15" result="offsetblur" /> <!-- how much to offset --> <feComponentTransfer> <feFuncA type="linear" slope="0.4" /> </feComponentTransfer> <feComposite operator="out" in2="SourceGraphic"/> </filter> <g id="myshape"> <path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" /> <polygon class="st1" points="92,140 92,76 140,108" /> <g> </defs> <use xlink:href="#myshape"/> <use id="usedshadow" filter="url(#dropshadow)" xlink:href="#myshape"/> </svg> 

Answer 2

您可以使用具有高斯模糊的路徑模擬陰影而不是使用濾鏡來實現此效果，我得到的結果是：

這樣，您可以直接處理“投影”，然后僅需簡單的CSS即可進行不透明度轉換。

svg #shadow{
  transition: all 0.65s;
  opacity:1;
}
svg:hover #shadow{
  opacity:0;
}

完整的SVG：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="216"
   height="216"
   id="svg3013">
  <defs
     id="defs3015">
    <filter
       x="-0.14227594"
       y="-0.13746469"
       width="1.2845519"
       height="1.2749294"
       color-interpolation-filters="sRGB"
       id="filter3826">
      <feGaussianBlur
         id="feGaussianBlur3828"
         stdDeviation="8.4688065" />
    </filter>
  </defs>
  <g
     transform="translate(0,-836.36218)"
     id="layer1">
    <path
       d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
       transform="matrix(1.064,0,0,1.0280193,-11.320001,836.29069)"
       id="shadow"
       style="fill:#1a1a1a;fill-opacity:1;stroke:none;filter:url(#filter3826)" />
    <g
       transform="translate(-0.14285916,0.7142867)"
       id="g3806">
      <path
         d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
         transform="matrix(1.064,0,0,1.0280193,-11.177142,835.5764)"
         id="path3021"
         style="fill:#4982cf;fill-opacity:1;stroke:none" />
      <path
         d="m 86.476396,914.53271 0,58.81194 54.094674,-27.18845 z"
         id="path3796"
         style="fill:#ffffff;stroke:none" />
    </g>
  </g>
</svg>

這里的工作示例： https : //jsfiddle.net/h3s1hp3k/