Как сделать четкую рамку при наведении (SVG)?

#html #css #css3 #svg #анимация

Изучаю SVG графику. Пытаюсь сделать логотип, хочу что бы при наведении заливка менялась
у самого блока и у буквы, это сделать получилось. Так же хотелось, чтобы появлялась
обводка у блока, но если делать это средствами SVG, то она получается совершенно не четкая:








Как это можно исправить?
    

Ответы

Ответ 1

В первый ответ добавил красную рамку style="border:1px solid red;"чтобы видно было
реальные границы svg.
 Именно столько места 150x150px будет занимать иконка при верстке Html странички,
образуя тем самым большие отступы от остальных элементов странички. 
Нужно расширить viewBox но всего на 6px, чтобы сделать отступы минимальными - 3px  

И так:  viewBox="-3 -3 56 56" 

Ниже полный код. Красную рамку оставил для наглядности: 






 

UPDATE

По замечаниям в комментариях
Текст находится на слой выше полигона  поэтому экранирует  :hover на букве.
Для устранения экранирования применим к тексту стиль  pointer-events="none", который
сделает текст прозрачным для событий мышки.     

E


Ответ 2

В вашем примере stroke везде одинаковой толщины, нужно лишь изменить поле видимости,
то есть viewBox и размеры самого SVG, вот исправленный пример:



.polylogobox {
  fill: #ef402a;
  transition: 0.2s;
}

.polylogobox:hover {
  fill: #fff;
}

.polylogobox:hover+text {
  fill: #ef402a;
}

text {
  font-size: 30px;
  fill: #fff;
  font-family: Arial, sans-serif;
  transition: 0.2s;
  pointer-events: none;
}