SVG過濾器不會在使用轉換懸停時消失

我目前正在研究一些新的東西，並且我已經介紹了SVG對象的世界。他們很好。無論如何，我有一個我已經構建的按鈕，並且在其上放置了一個過濾器。我正在使用的設計者希望在懸停時將過濾器（投影）從不透明度1變爲0，並且將光標移回1。SVG過濾器不會在使用轉換懸停時消失

我已經嘗試了過濾器上的正常過渡，我可以讓過濾器消失，但過渡並不平坦。

這裏是我的代碼：

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/

EDITS

我已經創建了一個第二過濾器，這僅僅是一個透明的疊加，但也失敗了，做了同樣的不流暢的效果。

我在這裏非常茫然。

來源

2016-02-08 Mark Hill

透明度不是一個過濾器，它反正拼寫錯誤。 –

@RobertLongson我編輯我的代碼，我沒有注意到，這是我的舊的東西，任何方式，這是我一直在努力着，其效果得到了陰影消失將工作，但它不會褪色順利。 –

在過濾器上使用的過渡是不是這樣做的方法。這是一個更優雅的方式。有一堆東西在這裏你應該注意：

你需要的大小既SVG和濾色區域適當，以確保陰影不會切斷
不能過渡過濾器
支持CSS單元不被可靠地支撐一個SVG過濾器內部，粘到或者objectBoundingBox（％）或userSpaceOnUse（視框）單元
看我如何構造的過濾器，以允許其被所述形狀的頂部排出（捕捉懸停）而不會遮擋它。這就是過濾器的「operator =」out「部分
將過濾器包含在defs元素中，有些瀏覽器需要這樣做。
切勿使用Illustrator的出口爲boilerplates。他們實際上構建得不是很好。

一般來說，學習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>

來源

2016-02-09 04:29:31

您可以使用路徑與高斯模糊來模擬陰影，而不是使用過濾器達到這樣的效果，我得到的結果是這樣的：

通過這種方式可以處理「直接投影「，然後用簡單的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/

來源

2016-02-08 18:26:47 kevinkl3

SVG過濾器不會在使用轉換懸停時消失

回答

相關問題