@9karamba

Как изменить fill для circle (svg sprite) при наведении на блок?

<svg style="display: none;">
  <symbol id="company-rate" viewBox="0 0 85 63">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M52.0962 0H0V23.0192H2.42308V2.42308H52.0962V0ZM7.26923 7.26923H59.3654V9.69231H9.69231V30.2885H7.26923V7.26923ZM31.5 15.75H71.4808V42.4038H31.5V15.75ZM29.0769 13.3269H31.5H73.9038V44.8269H13.3269V13.3269H29.0769ZM29.0769 15.75V42.4038H15.75V15.75H29.0769ZM34.5288 25.4423H49.6731V23.0192H34.5288V25.4423Z"/>
        <circle cx="67.8462" cy="46.0384" r="16.9615" />
        <path id="white" d="M65.9058 41.6585C65.9058 42.915 65.5757 43.9088 64.9155 44.64C64.2624 45.3641 63.3751 45.7261 62.2534 45.7261C61.1318 45.7261 60.2409 45.3641 59.5807 44.64C58.9276 43.9088 58.6011 42.915 58.6011 41.6585C58.6011 40.4091 58.9276 39.4188 59.5807 38.6876C60.2409 37.9564 61.1318 37.5908 62.2534 37.5908C63.3751 37.5908 64.2624 37.9564 64.9155 38.6876C65.5757 39.4188 65.9058 40.4091 65.9058 41.6585ZM61.5826 43.0321C61.7459 43.3657 61.9695 43.5326 62.2534 43.5326C62.5374 43.5326 62.7575 43.3657 62.9136 43.0321C63.0769 42.6984 63.1585 42.2335 63.1585 41.6372C63.1585 41.0409 63.0769 40.5759 62.9136 40.2422C62.7575 39.9086 62.5374 39.7418 62.2534 39.7418C61.9695 39.7418 61.7459 39.9086 61.5826 40.2422C61.4264 40.5759 61.3483 41.0409 61.3483 41.6372C61.3483 42.2335 61.4264 42.6984 61.5826 43.0321ZM63.4035 53.3077H60.4432L66.4276 45.1085L71.6452 37.9422H74.6054L68.7915 45.9178L63.4035 53.3077ZM76.4476 49.485C76.4476 50.7415 76.1175 51.7353 75.4573 52.4665C74.8042 53.1906 73.9169 53.5526 72.7952 53.5526C71.6736 53.5526 70.7827 53.1906 70.1225 52.4665C69.4694 51.7353 69.1429 50.7415 69.1429 49.485C69.1429 48.2356 69.4694 47.2488 70.1225 46.5247C70.7827 45.7936 71.6736 45.428 72.7952 45.428C73.9169 45.428 74.8042 45.7936 75.4573 46.5247C76.1175 47.2488 76.4476 48.2356 76.4476 49.485ZM72.1244 50.8586C72.2877 51.1922 72.5113 51.3591 72.7952 51.3591C73.0792 51.3591 73.2993 51.1922 73.4554 50.8586C73.6187 50.5249 73.7003 50.06 73.7003 49.4637C73.7003 48.8674 73.6187 48.4024 73.4554 48.0687C73.2993 47.7351 73.0792 47.5683 72.7952 47.5683C72.5113 47.5683 72.2877 47.7351 72.1244 48.0687C71.9682 48.4024 71.8901 48.8674 71.8901 49.4637C71.8901 50.06 71.9682 50.5249 72.1244 50.8586Z"/>
    </symbol>
</svg>

<div class="block">
  <svg class="icon">
    <use xlink:href='#company-rate' />
  </svg>
</div>


#company-rate circle{
  fill: green;
}
#company-rate #white{
  fill: white;
}
.block:hover{
  background: #333;
}
 .block:hover #company-rate circle{ /*      не работает         */
  fill: blue;
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
JrDedywka
@JrDedywka
Самый простой вариант поместить это в div
Не работает так как ссылаетесь на внутренние селекторы которых нет.
<div class="item">
    <svg style="display: none;">
        <symbol id="company-rate" viewBox="0 0 85 63">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M52.0962 0H0V23.0192H2.42308V2.42308H52.0962V0ZM7.26923 7.26923H59.3654V9.69231H9.69231V30.2885H7.26923V7.26923ZM31.5 15.75H71.4808V42.4038H31.5V15.75ZM29.0769 13.3269H31.5H73.9038V44.8269H13.3269V13.3269H29.0769ZM29.0769 15.75V42.4038H15.75V15.75H29.0769ZM34.5288 25.4423H49.6731V23.0192H34.5288V25.4423Z"/>
              <circle cx="67.8462" cy="46.0384" r="16.9615" />
              <path id="white" d="M65.9058 41.6585C65.9058 42.915 65.5757 43.9088 64.9155 44.64C64.2624 45.3641 63.3751 45.7261 62.2534 45.7261C61.1318 45.7261 60.2409 45.3641 59.5807 44.64C58.9276 43.9088 58.6011 42.915 58.6011 41.6585C58.6011 40.4091 58.9276 39.4188 59.5807 38.6876C60.2409 37.9564 61.1318 37.5908 62.2534 37.5908C63.3751 37.5908 64.2624 37.9564 64.9155 38.6876C65.5757 39.4188 65.9058 40.4091 65.9058 41.6585ZM61.5826 43.0321C61.7459 43.3657 61.9695 43.5326 62.2534 43.5326C62.5374 43.5326 62.7575 43.3657 62.9136 43.0321C63.0769 42.6984 63.1585 42.2335 63.1585 41.6372C63.1585 41.0409 63.0769 40.5759 62.9136 40.2422C62.7575 39.9086 62.5374 39.7418 62.2534 39.7418C61.9695 39.7418 61.7459 39.9086 61.5826 40.2422C61.4264 40.5759 61.3483 41.0409 61.3483 41.6372C61.3483 42.2335 61.4264 42.6984 61.5826 43.0321ZM63.4035 53.3077H60.4432L66.4276 45.1085L71.6452 37.9422H74.6054L68.7915 45.9178L63.4035 53.3077ZM76.4476 49.485C76.4476 50.7415 76.1175 51.7353 75.4573 52.4665C74.8042 53.1906 73.9169 53.5526 72.7952 53.5526C71.6736 53.5526 70.7827 53.1906 70.1225 52.4665C69.4694 51.7353 69.1429 50.7415 69.1429 49.485C69.1429 48.2356 69.4694 47.2488 70.1225 46.5247C70.7827 45.7936 71.6736 45.428 72.7952 45.428C73.9169 45.428 74.8042 45.7936 75.4573 46.5247C76.1175 47.2488 76.4476 48.2356 76.4476 49.485ZM72.1244 50.8586C72.2877 51.1922 72.5113 51.3591 72.7952 51.3591C73.0792 51.3591 73.2993 51.1922 73.4554 50.8586C73.6187 50.5249 73.7003 50.06 73.7003 49.4637C73.7003 48.8674 73.6187 48.4024 73.4554 48.0687C73.2993 47.7351 73.0792 47.5683 72.7952 47.5683C72.5113 47.5683 72.2877 47.7351 72.1244 48.0687C71.9682 48.4024 71.8901 48.8674 71.8901 49.4637C71.8901 50.06 71.9682 50.5249 72.1244 50.8586Z"/>
          </symbol>
      </svg>
      
      <div class="block">
        <svg class="icon">
          <use xlink:href='#company-rate' />
        </svg>
      </div>
    </div>


#company-rate circle{
    fill: green;
  }
  #company-rate #white{
    fill: white;
  }
  .block:hover{
    background: #333;
  }
   .item:hover #company-rate circle
    fill: blue;
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы