SVG를 유사 요소의 내용으로 사용하는 방법이 있습니까 ::before 또는 ::fore

SVG를 유사 요소의 내용으로 사용하는 방법이 있습니까 ::before 또는 ::fore

사용하고 싶습니다.::before선택한 일부 요소 앞에 SVG 영상을 배치하는 방법

#mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

위의 코드는 일반 텍스트만 표시합니다.
스펙을 확인해보니 어떤 것에 제한이 있는 것 같습니다.content그럴 수 있습니다. CSScontent속성 솔루션이 선호됩니다.

네, 할 수 있어요!방금 이것을 테스트했는데 잘 작동합니다, 정말 멋져요!

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

또는 SVG를 직접 CSS에 넣는 경우:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}

<div id="test"></div>

여기에 표시된 대로 SVG URL 인코더를 사용하여 자신만의 SVG를 포맷합니다.

당신은 CSS 기능을 사용할 수 있습니다.

#mydiv::before {
  content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

SVG에 # 기호가 포함되어 있지 않은지 확인합니다.이와 같은 인코더를 사용합니다.

SVG를 다음과 같이 추가할 수 있습니다.background-image빈털터리의:after또는:before.

여기 있습니다.

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

<div class="author_">Lord Byron</div>

.author_ {  font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
  position:relative;
  margin-top: -0.5em;
  color: black;
  z-index:1;
  overflow:hidden;
  text-align:center;
 
}


.author_:after{
   left:20px;
  margin:0 -100% 0 0;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.author_:before {
  right:20px;
  margin:0 0 0 -100%;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}

	<div class="author_">Lord Byron</div>

SVG 인코딩 URL 인코더를 위한 편리한 도구

CSS 스프라이트와 데이터 uri를 사용하면 빠른 로딩과 적은 요청과 같은 추가적인 흥미로운 이점을 얻을 수 있으며 이미지/base64를 사용하여 IE8 지원을 받을 수 있습니다.

SVG를 사용한 코드펜 샘플

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

IE8의 경우 다음으로 변경합니다.

  background-image: url(data:image/png;base64,data......);

이 주제를 더 확장하기 위해.폰트 어썸 5 아이콘을 추가하려면 CSS를 추가해야 합니다.

아이콘에는 기본적으로 클래스가 있습니다.svg-inline--fa그리고.fa-w-*.

다음과 같은 수식어 클래스도 있습니다.fa-lg,fa-rotate-*기타 등등.확인이 필요합니다.svg-with-js.css파일을 작성하고 적절한 CSS를 찾습니다.

CSS 아이콘에 자신만의 색을 추가해야 합니다. 그렇지 않으면 기본적으로 검은색이 됩니다. 예를 들어fill='%23f00'어디에%23인코딩됨#.

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;
  
  /* fa-w-14 */
  width:.875em;
  
  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");
  
  /* Margin */
  margin-right:.75rem;
}

<h1>Lorem Ipsum</h1>

다른 모든 답변이 IE에 문제가 있음을 주의하십시오.

이 상황에서 아이콘이 추가된 버튼을 사용합니다.모든 브라우저는 이를 올바르게 처리하지만 IE는 요소의 너비를 가져와서 내용 크기를 조정하여 요소에 맞게 조정합니다.제이에스아이들

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

해결책은 크기를 요소 이전으로 설정하고 요소를 원래 위치에 두는 것입니다.

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

그background-image+background-size솔루션도 작동하지만 동일한 크기를 두 번 지정해야 하기 때문에 약간 다루기 어렵습니다.

IE11의 결과:

비록 이것이 수년 전의 일이지만, 저도 이것을 공유하고 싶습니다.

위의 답변이 맞으며, 인코딩된 svg 문자열을 css 컨텐츠 속성에 직접 첨부할 수 있습니다.URL에 문제가 있는 사람은 공백과 문자가 유효하지 않기 때문일 수 있습니다. 이 경우 디코딩된 SVG 코드를 https://mothereff.in/url 에 붙여넣습니다.

인코딩된 SVG URL을 사용하면 정상적으로 작동합니다.부정확하고 올바른 예:

#incorrect::before {
  content: url(
    data:image/svg + xml,
    <svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
  );
}

#correct::before {
  content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}

내용이 비어 있는 배경 마스크 이미지를 사용하여 CSS 내에서 색상을 제어할 수 있습니다. (원하는 위치, 너비 및 높이를 잊지 마십시오.)...!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';

저는 오늘 이곳의 한 신문이 기사에서 강조된 내용에 대한 양식화된 인용문을 렌더링하기 위해 ::before 및 :::fore-pseudo-elements에 SVG를 직접 주입하는 방법을 사용했다는 것을 알게 되었습니다.저는 whatcms.org 를 통해 그 논문의 CMS를 찾으려고 했지만, 소용이 없었습니다.하지만 소유자 신문, 심지어는 국제적인 큰 국내 신문은 DM Polopoly라고 불리는 CMS를 사용한다고 말할 수 있습니다.

SVG 데이터를 콘텐츠 요소에 입력하고 SVG를 배경 이미지로 사용하는 것보다 훨씬 더 많은 작업이 필요한 것 같습니다.나는 그들이 왜 이 방법을 선택했는지 궁금하다 - 이것과 어떤 이점이 있었는지.저는 구글 링크에서 가짜 요소를 맴도는 SVG 이미지를 쉽게 조작할 수 있다고 말하는 사람들을 본 적이 있습니다. 하지만 저는 이 '편익'의 치명적인 예를 보지 못했습니다.

이 문서에는 SVG를 컨텐츠로 삽입하는 더 간단한 방법이 있습니다.확대/축소 속성을 사용하여 이미지의 크기를 조정합니다.

.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}

언급URL : https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after