Блог

Я пытаюсь центрировать это фоновое изображение base64 внутри горизонтального прямоугольника div, и это просто не работает.

Я знаю, что это должно быть довольно тривиально, и я рассмотрел здесь много почти похожих вопросов, но никакой трюк не сработал. Изображение не центрировано по горизонтали, и я не знаю почему. На самом деле, background-position, похоже, не оказывает никакого эффекта, если я не использую пиксели явно.

вы можете увидеть это на этой игровой площадке: https://codesandbox.io/s/solitary-worker-vvrx4?file=/index.html

 .container {
   background: red;
   width: 100px;
   height: 16px;
   background-image:url("data:image/svg xml;base64,...");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
}


<div class="container"></div>
 

Может кто-нибудь, пожалуйста, помочь?
Спасибо.

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

Что я сделал:

• Изменено transform="rotate(90 8 8)" на transform="rotate(90)"
• Добавлены определенные свойства ширины и высоты width="160" height="160"

Вот результат

 .icon {
  background: red;
  width: 100px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.icon--broken {
  background-image: url("data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDgpIiBmaWxsPSIjMzM5OWZmIj4KPGc Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIxMy45IiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMTEuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDE1LjEsOSwxNiw3LjgsMTZzLTIuMS0wLjktMi4xLTIuMUM1LjcsMTIuNyw2LjcsMTEuOCw3LjgsMTEuOHoiLz4KPC9nPgo8Zz4KCTxjaXJjbGUgY3g9IjcuOCIgY3k9IjcuOSIgcj0iMS43Ii8 Cgk8cGF0aCBkPSJNNy44LDUuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDkuMSw5LDEwLDcuOCwxMFM1LjcsOS4xLDUuNyw3LjlDNS43LDYuOCw2LjcsNS44LDcuOCw1Ljh6Ii8 CjwvZz4KPGc Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIyLjEiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCwwQzksMCw5LjksMC45LDkuOSwyLjFjMCwxLjItMC45LDIuMS0yLjEsMi4xUzUuNywzLjMsNS43LDIuMUM1LjcsMC45LDYuNywwLDcuOCwweiIvPgo8L2c Cjwvc3ZnPgo=");
}

.icon--fixed {
  background-image: url("data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdHJhbnNmb3JtPSJyb3RhdGUoOTApIiBmaWxsPSIjMzM5OWZmIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCI CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8 Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8 CjwvZz4KPGc Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgo8L3N2Zz4K");
} 

 <div class="icon icon--broken"></div>
<div class="icon icon--fixed"></div> 

Проблема не в CSS, а в изображении SVG внутри строки base64. Когда вы открываете его, вы обнаруживаете следующий код:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" transform="rotate(90 8 8)" fill="#9c9c9c">
<g>
    <circle cx="7.8" cy="13.9" r="1.7"/>
    <path d="M7.8,11.8c1.2,0,2.1,0.9,2.1,2.1C9.9,15.1,9,16,7.8,16s-2.1-0.9-2.1-2.1C5.7,12.7,6.7,11.8,7.8,11.8z"/>
</g>
<g>
    <circle cx="7.8" cy="7.9" r="1.7"/>
    <path d="M7.8,5.8c1.2,0,2.1,0.9,2.1,2.1C9.9,9.1,9,10,7.8,10S5.7,9.1,5.7,7.9C5.7,6.8,6.7,5.8,7.8,5.8z"/>
</g>
<g>
    <circle cx="7.8" cy="2.1" r="1.7"/>
    <path d="M7.8,0C9,0,9.9,0.9,9.9,2.1c0,1.2-0.9,2.1-2.1,2.1S5.7,3.3,5.7,2.1C5.7,0.9,6.7,0,7.8,0z"/>
</g>
</svg>
 

Обратите внимание на transform="rotation(90 8 8)" атрибут. Это поворачивает изображение на 90 градусов вокруг точки [8,8]. Точка должна быть центром изображения в соответствии с viewBox="0 0 16 16" , но по какой-то причине размеры нарушаются, и смещение в 16 пикселей выделяется в левой части изображения.

Самое простое исправление — изменить значение атрибута transform на rotation(90) . Фиксированное изображение в base64:

 data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHRyYW5zZm9ybT0icm90YXRlKDkwKSIgZmlsbD0iIzljOWM5YyI CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8 Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8 CjwvZz4KPGc Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgoJCjwvc3ZnPg==
 

Вам нужно увеличить ширину контейнера.

Вы можете увидеть это на этой игровой площадке: https://codesandbox.io/s/admiring-monad-lwqlk ?file=/index.html