Question

我有一个.svg图标，当我将鼠标悬停在该图标上时想显示图像。它可以在普通图标（红色正方形）上使用，但是以某种方式无法使用.svg（黑色圆圈）！

请帮忙。谢谢！

HTML

<div class="red">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
        fill: 'black';
      }
    </style>
    <circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/>
  </defs>

   <use x="10" y="0"   xlink:href="#myDefsCircle" class="red"/>
</svg>

CSS

.red:hover {
  fill:red;
  background: url('https://www.iconsdb.com/icons/preview/orange/phone-46-xxl.png') no-repeat;
  width: 250px;
  height: 200px;
  background-position: center;
}

.red {
  border: 1px solid red;
  width: 20px;
  height: 20px;
}

Answer 1

这是使用SVG的方法：

在SVG中，您不能使用背景图片。您需要使用<image>标签绘制图像，其中必须使用src属性代替xlink:href属性。同样，您无法在CSS中更改svg元素的width和height。如果您不想使用Javascript，则无法更改它们。

这就是我所做的：我对width和height进行了硬编码，但我将元素设为透明：opacity:0，并在悬停时将不透明度更改为1.我希望这就是你要的。

svg{border:1px solid}
.test{opacity:0}
.red:hover ~use{opacity:1}

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
  <circle cx="20" cy="20" r="20" id="myDefsCircle" />  
    
 <symbol id="symb1" viewBox="0 0 40 40">
 <use xlink:href="#myDefsCircle" fill="red" />
 <!--<image xlink:href="https://www.iconsdb.com/icons/preview/orange/phone-46-xxl.png" width="30" height="30" x="5" y="5" />-->
 
 <!--<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat" width="30" height="30" x="5" y="5" />-->
 
 
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png" width="30" height="30" x="5" y="5" />
 </symbol>

 </defs>
  
   
  <use xlink:href="#myDefsCircle" x="180" y="180" class="red"  />
  <use xlink:href="#symb1"  class="test" pointer-events="none" width="200" height="200" x="100" y="100" />
</svg>

：悬停在.SVG上显示图像

1 个答案: