Как установить размер фона больше, чем сам элемент без элемента-оболочки - PullRequest
Новая
       33

Как установить размер фона больше, чем сам элемент без элемента-оболочки

0 голосов
/ 15 октября 2018

Допустим, у меня есть простой значок SVG: 

<svg class="myclass">
    <use href="#my-icon"/>
</svg>

.myclass {
    width: 22px;
    height: 22px;
    &:hover {
        background: rgba(0,0,0,.1);
        // HOW TO SET BACKGROUND SIZE LARGER THAN ELEMENT SIZE
        border-radius: 50%;
    }
}

Есть ли какой-нибудь нативный (не хакерский) способ CSS, чтобы применить больший размер фона к самому элементу + применить радиус границы?Допустим, я хочу, чтобы фон был 36px;Тень от коробки не помогает.Размер фона также.Конечно, я знаю, как это сделать с помощью элемента-обертки, но мне это не нужно?Просто поместите ваш значок и примените фон, как вы хотите ...?

ОБНОВЛЕНИЕ: Дополнение Настройка Codepen

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Ваша проблема в том, что вы пытаетесь манипулировать SVG как обычным HTML-элементом, но это не так.Все, что у вас есть в SVG, является его частью, поэтому у вас есть 2 варианта:

  1. Редактировать само SVG.
  2. Добавить обертку для контроля позиции SVG на нем.
0 голосов
/ 15 октября 2018

Я думаю, что добавление свойства padding решит вашу проблему.

Или, если вы хотите применить цвет фона к значку, вы можете использовать абсолютную высоту / ширину и выровнять значок со свойством отображения (например, flex)

...