css - 背景 svg 图像闪烁 onhover 动作
问题描述
我正在使用输入类型范围,其中有一个用于滑块拇指的 svg。此滑块拇指 svg 在悬停/活动时随另一个 svg 变化。首次加载网页时出现闪烁。
我曾尝试在输入的伪类之前加载这两个图像,但这样做没有帮助。
input[type=range]::-webkit-slider-thumb {
background: url('images/slider-range-thumb.svg') no-repeat;
border-style: none;
cursor: pointer;
height: 77px;
opacity: unset;
width: 50px;
appearance: none;
margin-top: -38px;
&:active, &:hover {
background: url('images/slider-range-thumb-active.svg') no-repeat;
}
}
解决方案
我没有闪烁。也许问题出在您的 SVG 上。
input[type='range'] {
width: 250px;
margin-top:50px;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat") no-repeat;
border-style: none;
cursor: pointer;
height: 95px;
/*opacity: unset;*/
width: 95px;
appearance: none;
margin-top: -47px;
}
input[type='range']::-webkit-slider-thumb:active,
input[type='range']::-webkit-slider-thumb:hover {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat") no-repeat;
}
input[type=range]::-webkit-slider-runnable-track {
background-color: #777;
height: 3px;
}
<input type="range" />
在这个例子中,我使用了这个 SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 225 225">
<style type="text/css">
<![CDATA[
svg > svg:not(:target) {
display: none;
}
]]>
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,108.953c3.145-2.115,5.896-3.967,8.624-5.802
c20.948,12.522,42.66,12.281,65.725,4.354c0.778,3.128,1.687,6.18,2.285,9.291c3.208,16.677,0.616,36.326-2.758,52.719
c0,0-152.162,0.035-154.82,0.035c8.408,10.604,18.647,16.674,31.173,16.227c15.059-0.536,30.099-2.491,45.07-4.433
c26.453-3.431,50.783,0.317,70.991,19.392c1.675,1.581,7.179,9.382,3.632,13.47c-3.524,4.062-12.062-1.289-13.795-3.036
c-10.215-10.294-22.693-16.145-37.008-15.98c-14.568,0.166-29.103,2.376-43.679,3.216c-11.405,0.656-22.888,1.255-34.268,0.634
c-9.862-0.538-18.646-5.258-25.691-12.131c-15.127-14.758-26.56-31.716-26.923-53.792c-0.396-24.125,17.008-44.198,40.835-48.153
c23.477-3.897,43.372,4.666,62.051,17.569C115.82,104.515,118.537,106.717,121.506,108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651c3.646,6.147,7.048,11.646,10.189,17.291
c1.404,2.523,2.761,3.481,5.888,2.718c14.09-3.439,28.227-3.932,42.396-0.046c1.308,0.358,3.815-0.733,4.608-1.923
c4.043-6.072,7.705-12.398,11.814-19.149c8.693,15.648,15.012,31.447,13.169,49.204c-1.48,14.266-9.114,24.946-22.028,31.172
c-17.641,8.503-35.969,9.511-54.067,1.823c-15.169-6.443-22.96-18.723-23.677-35.151C117.396,49.828,122.038,32.188,129.747,18.651z
M189.467,81.017c7.232,0.084,15.334-6.867,14.292-13.652c-0.832-5.418-11.566-6.019-11.732-6.025
c-7.238-0.308-13.768,6.133-14.144,13.949C177.731,78.444,182.773,80.938,189.467,81.017z M145.369,81.453
c3.597,0.294,11.258-2.441,11.324-6.992c0.079-5.443-3.357-10.158-8.897-12.255c-5.807-2.197-16.523,1.484-17.065,5.19
C129.692,74.494,138.107,81.089,145.369,81.453z"/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>
</svg>
在主 SVG 内部,还有 2 个其他 svg 元素,display: none;
请查看我用于拇指背景的 URL:cat.svg#redcat
, cat.svg#blackcat
。通过这样做,我只引用了这两个 SVG 元素之一,以便我可以使用:target
选择器使引用的 SVG 可见。
如果这没有帮助,请添加更多代码。一个工作示例将是完美的。
推荐阅读
- c# - 搜索包含额外字符的 ID
- node.js - 在使用 Spawn Child Process 时使用文件的内容
- windows - 调试器命令语法解释
- css - 定位 jupyter notebook 用于数据框的默认 .css
- roblox - Roblox - 如何在 roblox 数据存储中存储大型数组
- html - 如何在 Chart.js 中为 Angular 项目获取 canvas/ctx 对象
- java - Idea Intellij:找不到依赖关系org.json:json:20180813,无法在maven中导入org.json库
- sql - 从文本框中忽略 sql 查询中的撇号
- javascript - 在使用 JQuery 的选择中再次单击相同的选项
- asp-classic - 在经典 ASP 应用程序中调试通过 VBScript 调用的 VB6 ActiveX DLL