Question

我正在使用输入类型范围，其中有一个用于滑块的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;
   }
 }

Answer 1

我不会忽悠。也许问题出在您的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内还有另外两个带有display: none;的svg元素，请查看我用于拇指背景的URL：cat.svg#redcat，cat.svg#blackcat。通过这样做，我仅引用了这两个SVG元素之一，因此我可以使用:target选择器使所引用的SVG可见。

如果这没有帮助，请添加更多代码。一个可行的例子将是完美的。

背景svg图像闪烁悬停动作

1 个答案: