Установка цвета SVG в CSS для покрытия всего фона - PullRequest
Новая
       7

Установка цвета SVG в CSS для покрытия всего фона

1 голос
/ 30 апреля 2020

У меня есть набор значков социальных сетей в формате SVG, и я использую атрибуты высоты и ширины 2em. Но мой цвет фона не белый. Я думал, что это не проблема, пока я не попытался решить проблему, установив цвет фона SVG. По какой-то причине фон SVG - это не весь SVG, а его часть. Вы можете увидеть это во фрагменте. Возможно, это как-то связано с атрибутом viewBox='0 0 24 24' SVG. Возможно ли установить фон, чтобы он соответствовал 2em x 2em - точно так же, как размер SVG, который я установил?

Без белого фона SVG выглядят не очень красиво.

Обновление : Я немного изменил код по сравнению с первоначальной версией. Теперь это выглядит так: 

body {background: rgba(78, 192, 253, .7);}
.tg:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
    background-color: #fff;}
    
    .soc {
    padding: 0.5em;
}
<fieldset class="fs01">
                    <legend><a href="https://t.me/grolribasi" class="soc tg" target="_blank">@Grolribasi</a></legend>
                    <p class="soc">Text goes here</p>
                </fieldset>

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Одним из возможных решений вашей проблемы является добавление белого заполненного пути к элементу svg, например: 

body {background: rgba(78, 192, 253, .7);}
.soc:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
}
<body>
<a href="https://t.me/grolribasi" class="soc tg" target="_blank">tg</a><br>
 <a href="https://t.me/grolribasi" class="soc" target="_blank">tg</a><br>
</body>

Чтобы получить правильный путь, я использую первую часть (от начала до первой команды m) атрибута d из вашего кода.

Объяснение:

Это SVG, который я использую в качестве фона. 

<svg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'>
  <path fill="white" d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/>
  <path d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z
           
        m-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'></svg>

Первоначальный путь, тот, который у вас есть в вашем коде, является скрытым. Вот почему вы можете увидеть синий фон. Если вам нужно, чтобы равнина была белой, вам нужно использовать что-то белое за отверстием. Обычно прямоугольник подходит, но вы указали путь закругленных углов, и если вы используете прямоугольник, вы увидите белые углы.

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

Далее Вы должны закодировать это. Самый простой способ - использовать этот кодировщик SVG: https://codepen.io/yoksel/pen/JDqvs

0 голосов
/ 30 апреля 2020

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

body {background: rgba(78, 192, 253, .7);}

.soc {
  width: 32px;
  height: 32px;
  background: white;
  display: inline-block;
   border-radius: 8px;
}

.soc:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath id='telegram-3' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
}
<body>
<a href="https://t.me/grolribasi" class="tg" target="_blank"><i class="soc"></i>tg</a><br>
 <a href="https://t.me/grolribasi" target="_blank"><i class="soc"></i>tg</a><br>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...