[css] 의사 요소에서 SVG를 내용으로 사용하는 방법이 있습니까 : before 또는 : after
선택한 일부 요소 앞에 SVG 이미지를 배치하고 싶습니다. JQuery를 사용하고 있지만 관련이 없습니다. : before 요소를 다음과 같이 만들고 싶습니다.
#mydiv:before {
content:"<svg.. code here</svg>";
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
위와 같이하면 문자열 만 표시됩니다. 사양을 확인한 결과 내용에 제한이있는 것 같습니다. 이 제한에 대한 해결 방법이 있습니까? 내용 CSS 만 내 질문과 관련이 있습니다.
답변
그래 넌 할수있어! 방금 이것을 테스트했는데 훌륭하게 작동합니다. 여전히 html에서는 작동하지 않지만 svg에서는 작동합니다.
내 index.html에는 다음이 있습니다.
<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>그리고 내 test.svg는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg> 답변
예. 빈 : after 또는 : before의 배경 이미지로 SVG를 추가 할 수 있습니다. 여기 있습니다 :
.anchor:before {
display: block;
content: ' ';
background-image: url('../images/anchor.svg');
background-size: 28px 28px;
height: 28px;
width: 28px;
}답변
#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에 큰 따옴표가 포함되지 않도록하고 # 기호를 uriencode하십시오.
답변
CSS 스프라이트와 데이터 URI를 사용하면 빠른 로딩 및 적은 요청과 같은 흥미로운 이점이 있으며 image / base64를 사용하여 IE8 지원을 얻을 수 있습니다.
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......);답변
<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>답변
IE의 다른 모든 답변에는 문제가 있습니다.
이 상황을 가질 수 있습니다-앞에 아이콘이있는 버튼. 모든 브라우저는 이것을 올바르게 처리하지만 IE는 요소의 너비를 가져 와서 이전 내용을 크기에 맞게 조정합니다. JSFiddle
#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의 결과 :
답변
이 주제를 더 확장합니다. Font Awesome 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>