: Наведите курсор на изображение .SVG

Question

У меня есть значок .svg, и я хочу показать изображение, когда наведу на него значок.Он работает на обычном значке (красный квадрат), но почему-то не работает .svg (черный круг)!

Пожалуйста, помогите.Спасибо!

jsfiddle

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.Также вы не можете изменить width и height элементов SVG в CSS.Если вы не хотите использовать Javascript, вы не можете их изменить.

Это то, что я сделал: я жестко закодировал width и height, но я сделал элемент прозрачным: opacity:0 и при наведении курсора поменяю непрозрачность на 1. Iнадеюсь, это то, что вы спрашивали.

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>