>

나는 소포로 건축하고있는 바닐라 js 프로젝트를 가지고있다. 내 HTML에 아이콘 태그가 있습니다.

<i class="icon"></i>

그리고scss파일 배경을 설정하고 있습니다.svg존재하는 파일 projectRoot/src/assets/icons/icon.svg :

.icon {
    background: url('../assets/icons/icon.svg');
    height: 16px;
    width: 16px;
    display: block;
}

콘솔에서 검사 할 때 아이콘을 열면 아이콘을 올바르게 가져오고 있음을 알 수 있습니다.로컬 호스트 : 3000/icon.5187a1f6.svg아이콘이 보입니다. 브라우저에서 왜 보이지 않는지 궁금합니다.

이것은 svg 파일입니다.

<?xml version="1.0"?>
<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
    <circle style="fill:#1273EB" cx="256" cy="256" r="256" data-original="#2D404E" class="active-path" data-old_color="#2D404E"/>
    <path style="fill:#48B19B;" d="M512,256c0-51.363-15.124-99.191-41.165-139.275c0,0-14.604,21.334-11.86,35.047   c2.742,13.715,18.855,14.762,17.2,24.822s-13.541-2.879-28.172,23.633c-14.63,26.514-7.312,63.096,13.714,65.834   C482.744,268.797,512,256,512,256z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M323.23,8.92c29.797,8.088,57.434,21.424,81.857,38.951c0,0-29.684-4.896-40.929,5.158   c-11.244,10.057-27.643,33.832-40.929,0C309.945,19.199,323.23,8.92,323.23,8.92z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M63.519,87.219C110.437,33.754,179.275,0,256,0c0,0-17.368,10.516,15.546,28.344   c32.915,17.83,17.828,26.057,10.971,31.543c-6.856,5.486-18.749-10.971-26.517-21.941c-7.769-10.973-41.132-27.885-66.734-18.74   c-25.601,9.145-47.539,15.9-43.885,24.408c3.653,8.506,47.539-7.945,63.996-7.035c16.457,0.912,10.971,10.967-4.569,22.854   c-15.542,11.887-17.374,26.514-0.916,35.656c16.456,9.146,36.566,10.061,41.143,4.576c4.574-5.486-8.229-41.143,22.858-25.602   s56.688,24.691,31.087,47.545c-25.602,22.852-54.857,48.461-55.773,63.084c-0.916,14.625,9.146,26.52,3.66,27.43   c-5.486,0.91-10.521-5.941-14.176-10.973c-3.653-5.029-20.571-6.855-28.799-3.658c-8.229,3.197-23.774,15.541-15.086,27.428   c8.689,11.889,20.565,6.396,32.454,11.883c11.887,5.486,22.972,26.365,20.696,31.084c-2.276,4.717-12.409-1.256-20.696-17.369   c-8.289-16.115-23.835-5.486-34.773-8.229c-10.939-2.742-19.168-4.57-30.14-23.771c-10.972-19.199-33.687-24.572-42.969-35.656   c-26.589-31.75-24.687-55.771-30.172-66.742C77.72,105.145,63.519,87.219,63.519,87.219z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M280.685,259.658c0,0,27.429,2.738,41.143,14.627c13.714,11.887,15.546,16.461,36.573,21.031   c21.027,4.568,30.172,16.451,16.457,39.311c-13.714,22.857-38.404,59.43-50.287,70.402c-11.882,10.973-26.512,20.115-31.998,38.4   c-5.485,18.283-7.317,29.248,4.57,36.568c0,0-6.396,15.545-21.026-4.57c-14.631-20.117-2.744-43.885,0-57.6   c2.742-13.713,10.055-54.852,5.484-64.914c-4.568-10.059-25.601-16.461-31.087-37.486   C245.028,294.401,254.629,253.483,280.685,259.658z" data-original="#48B19B" class=""/>
    <path style="opacity:0.6;fill:#253744;enable-background:new    ;" d="M74.98,74.983c99.975-99.977,262.062-99.975,362.038,0   c99.976,99.973,99.976,262.062,0.001,362.037c0,0,116.148-153.59-48.293-318.031C224.284-45.453,74.98,74.983,74.98,74.983z"/>
</g></g> </svg>

  • 답변 # 1

    배경 위치와 배경 표지를 추가 할 수 있습니다. 따라서 CSS는 다음과 같아야합니다.

    .icon {
        background: url('../assets/icons/icon.svg');
        background-position: center;
        background-size: cover;
        height: 16px;
        width: 16px;
        display: block;
    }
    
    

  • 이전 javascript - babel이 "true"를 "! 0"으로 변환하는 이유
  • 다음 class - Java 런타임 오류가 모든 프로그램에 대해 기본 메소드를 찾을 수 없다고 말합니다