피그마 svg 적용
본문
피그마에서 svg 로 다운 후 css 백그라운드나 img 로 사용할려고 하는데 방법 좀 부탁드립니다.
답변 1
.div_1 {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='29' height='28' viewBox='0 0 29 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.4478 11.2C28.4478 18.932 22.2031 28 14.5 28C6.79687 28 0.552246 18.932 0.552246 11.2C0.552246 3.46801 6.79687 0 14.5 0C22.2031 0 28.4478 3.46801 28.4478 11.2Z' fill='%23FAEDE1'/%3E%3C/svg%3E");
background-position: center;
background-size: auto;
background-repeat: no-repeat;
}
위의 코드를 응용하시면 됩니다.
<div class="invoice__header">
<div data-v-6f2ca460="" id="timer_invoice" class="progress">
<div data-v-6f2ca460="" class="progress__line" style="width: 1%;"></div>
<div data-v-6f2ca460="" class="progress__row">
<div data-v-6f2ca460="" class="progress__status">
<svg data-v-6f2ca460="" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" class="progress__icon_loader">
<path data-v-6f2ca460="" d="M38.715.01a38.94 38.94 0 0 1 15.433 2.83c4.922 1.985 9.47 4.995 13.304 8.801a42.26 42.26 0 0 1 9.115 13.49c2.16 5.078 3.33 10.631 3.433 16.202h-.019c.012.147.019.295.019.444 0 2.945-2.31 5.332-5.16 5.332-.102 0-.203-.004-.304-.01a38.246 38.246 0 0 1-2.14 8.648 38.072 38.072 0 0 1-7.681 12.45 37.022 37.022 0 0 1-11.802 8.551 36.188 36.188 0 0 1-14.198 3.242 36.437 36.437 0 0 1-14.446-2.627c-4.607-1.85-8.87-4.662-12.467-8.224a39.594 39.594 0 0 1-8.557-12.626C1.216 51.759.113 46.561.01 41.333a41.259 41.259 0 0 1 2.64-15.436 40.758 40.758 0 0 1 8.24-13.313 39.597 39.597 0 0 1 12.64-9.129A38.694 38.694 0 0 1 38.714.009zm0 7.998a31.41 31.41 0 0 0-12.469 2.22c-3.979 1.581-7.672 3.997-10.795 7.069a34.245 34.245 0 0 0-7.438 10.898C6.245 32.3 5.275 36.788 5.17 41.333c-.11 4.544.644 9.12 2.247 13.393a35.399 35.399 0 0 0 7.122 11.585 34.442 34.442 0 0 0 10.966 7.974 33.666 33.666 0 0 0 13.21 3.039c4.563.114 9.164-.7 13.456-2.423 4.294-1.716 8.272-4.33 11.632-7.647A36.917 36.917 0 0 0 71.8 55.492a37.698 37.698 0 0 0 2.482-8.414c-2.588-.288-4.603-2.55-4.603-5.301 0-.15.007-.298.019-.444h-.02a33.04 33.04 0 0 0-2.05-12.372 32.716 32.716 0 0 0-6.563-10.721 31.858 31.858 0 0 0-10.13-7.397 31.148 31.148 0 0 0-12.22-2.835z" fill-rule="evenodd">
</path>
</svg>
<span data-v-6f2ca460="" class="progress__msg">Awaiting Payment...</span>
</div>
</div>
</div>
</div>
이미지는 쓰고 있는 샘플을 올립니다.
참고하세요.