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

324
31 марта 2018, 14:38

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

<svg height='50' width='50' vievBox='0 0 50 50'> 
  <style> 
    .polylogobox { 
      fill: #ef402a; 
      transition: .2s; 
    } 
    .polylogobox:hover { 
      fill: #fff; 
  stroke: #ef402a; 
  stroke-width: 3px; 
    } 
    .polylogobox:hover + text { 
      fill: #ef402a; 
    } 
    text { 
      font-size: 30px; 
      fill: #fff; 
      font-family: Arial, sans-serif; 
      transition: .2s; 
    } 
  </style> 
  <polygon class='polylogobox' points='0,0 24,0 28,5 50,5, 50,50 0,50 '/> 
  <text x='14' y='38'>E</text> 
</svg>

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

Answer 1

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

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

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

<svg height="56" width="56" viewBox="-3 -3 56 56" style="border:1px solid red;" > 
  <style> 
    .polylogobox { 
      fill:#ef402a; 
      transition: .2s; 
    } 
    .polylogobox:hover { 
      fill: #fff; 
  stroke: #ef402a; 
  stroke-width: 3px; 
    } 
    .polylogobox:hover + text { 
      fill: #ef402a; 
    } 
    text { 
      font-size: 30px; 
      fill: #fff; 
      font-family: Arial, sans-serif; 
      transition: .2s; 
    } 
  </style> 
  <polygon class='polylogobox' points='0,0 24,0 28,5 50,5, 50,50 0,50 '/> 
  <text x='14' y='38' pointer-events="none">E</text> 
</svg>

UPDATE

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

<text x='14' y='38' pointer-events="none">E</text>

Answer 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; 
}
<svg height='150' width='150' viewBox="-10 -10 150 150" style="Border:1px solid red;"> 
  <polygon class='polylogobox' points='0,0 24,0 28,5 50,5, 50,50 0,50' stroke-width="4" stroke="#ef402a"/> 
  <text x='14' y='38'>E</text>  
</svg>

READ ALSO
Как можно поменять стили внутри iFrame?
CSS

Как можно поменять стили внутри iFrame?

Есть сайт http://leiberlshv55372

 331
Стили футера в зависимости от высоты блока
CSS

Стили футера в зависимости от высоты блока

Можно ли сделать так, чтобы если блок меньше высоты окна страницы(короткое объявление), то футер был бы прижат к нижней части окна браузера,...

 229
выбрать один checkbox из двух
CSS

выбрать один checkbox из двух

Есть несколько checkbox-ов,нужно чтобы выбирался 1 или 2 checkbox, а остальные выбирались независимо от нихid, name не меняются так как используются в программе

 251
дочерний элемент при клике меняет стили второго родительского блока
CSS

дочерний элемент при клике меняет стили второго родительского блока

Возможно ли сделать так, чтобы при нажатии на дочерний элемент одного родительского блока , менялись стили другого родительского блока, только...

 197