Есть ли способ использовать SVG в качестве контента в псевдоэлементе: before или: after

246

Я хочу разместить изображения SVG перед выбранными элементами. Я использую jQuery, но это не имеет значения.

Я хотел бы, чтобы :beforeэлемент был как:

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

Если я сделаю это, как показано выше, он просто отобразит строку. Я проверил спецификации и, кажется, есть некоторые ограничения на содержание. Есть ли способ обойти это ограничение? Только содержание css относится к моему вопросу.

css svg

— Солнечно
источник

1

Что-то не так с его использованием в качестве фонового изображения?

— cimmanon

1

Я хочу использовать его для создания необычных указателей на всплывающие подсказки пользовательского интерфейса JQuery. Я делаю это сейчас с помощью хакерских псевдоэлементов CSS, но это дает мне только треугольники. Фоновое изображение не будет работать в этом случае, так как мне нужно что-то, что выходит за пределы элемента.

— Солнечный

253

Да, ты можешь! Только что проверил, и это прекрасно работает, это потрясающе! Он все еще не работает с 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>

— Dezman
источник

18

Если SVGs не являются особенными, вы должны быть в состоянии относиться к ним так же , как вы бы изображение: content: url(path/to/my.svg). Это не обязательно означает, что он будет работать с библиотекой подсказок jQuery UI.

— Цимманон

1

@ cimmanon Хм, это мило, я хочу это проверить. Так что в my.html или что-то еще, что я могу иметь кучу HTML-кода для рендеринга ... звучит круто.

— Дезман

2

Почему вы хотите это сделать? Если у вас уже есть svg-код в файле, нет необходимости помещать его в псевдокласс. Весь смысл псевдоклассов состоит в том, чтобы уменьшить количество элементов DOM, когда вы хотите добавить немного контента, но в вашем случае, если вы просто используете свой SVG-код нормально, это будет не хуже (и, вероятно, чище), чем поместить его в псевдо-класс. -класс (что также, вероятно, невозможно). Если, конечно, если вы хотите поместить свой SVG-код в кучу мест, в этом случае вы должны просто сохранить свой SVG-код в отдельном файле, например, в изображении.

— Дезман

6

К сожалению, я не верю, что это решение работает со спрайтами SVG. например, на content: url(mysprite.svg#my-icon)самом деле не будет тянуть вашу иконку. я хотел бы оказаться неправым, однако :)

— Джейсон

1

@watson, семантический. HTML = структура, CSS = презентация. Если SVG декоративен, то он не должен быть в структуре HTML, он должен быть в CSS.

— Deathlock

137

Да. Вы можете добавить SVG как фоновое изображение пустого: after или: before. Ну вот:

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

— DerZyklop
источник

4

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

— Danielo515

... ах это вселило надежду, пока я не понял, что background-sizeне поддерживается в Opera Mini. Это так расстраивает.

— Deathlock

Работал отлично. @deathlock, background-size не нужен, так как вы определяете размеры в самой svg, мне это не нужно.

— Эрик Сойке

1

Должны быть принятые ответы, так как вопрос говорит «в

— псевдоэлементе

Мне пришлось добавить <?xml version="1.0" encoding="utf-8"?>в начало моего файла SVG, чтобы он работал.

— Николя Буасто

130

#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 любых символов #.

— Дженни
источник

8

Поскольку SVG часто используют двойные кавычки, вы также можете просто использовать внешние одинарные кавычки. Предложение Дженни - отличный способ сделать это, если вы не хотите использовать внешний файл SVG.

— Micros

2

Это круто. К сожалению, он работает только с Chrome для меня (проверено на Chrome, Firefox и Edge).

— Арсен

2

ОК, это работает на FF. Просто нужно обратить внимание на часть "нет #". Также убедитесь, что вы используете тег div (кажется, не работает с span). К сожалению, до сих пор нет успеха для Edge.

— Арсен

Как и многие блестящие решения, он не поддерживается IE11. url('file.svg')работает однако.

— Боб Стейн

6

Что мне показалось важным, так это добавить часть xmlns='http://www.w3.org/2000/svg'<svg> для работы в Chrome 66.x. Например - маленький шеврон будет:

content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");

— darth0s

28

Использование CSS-спрайтов и данных URI дает дополнительные интересные преимущества, такие как быстрая загрузка и меньше запросов, и мы получаем поддержку IE8 с помощью image / base64:

Пример кодепа с использованием 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......);

— Сын
источник

Но это не масштабируемо, не так ли? Я не могу изменить размер до 16px или 320px по желанию.

— Deathlock

@deathlock Конечно, он масштабируется, хотя и не в моем семпле, так как у него установлен фиксированный размер, 80 пикселей в ширину / высоту.

— Асон

1

@deathlock Могу я спросить, не проголосовали ли вы, потому что приведенный выше пример не масштабировался?

— Ason

как бы вы сделали масштаб? И нет, я не сделал.

— Deathlock

@deathlock Спасибо, и вот один из способов масштабирования svg: jsfiddle.net/ess6ywce ... с использованием процентов. Кроме того, поиск с помощью SO, scale svgи вы найдете много других способов

— Ason

22

<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-encoder

— Алексей Забабурин
источник

5

Будьте осторожны, все остальные ответы имеют некоторые проблемы в 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:

IE рендеринг

— zbycz
источник

5

Для продолжения этой темы. Если вы хотите добавить иконки 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>

Развернуть фрагмент

— Якуб Муда
источник

-1

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

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

— Майкл Альфандре
источник

3

Вы должны объяснить немного больше своего ответа. Только из этого очень сложно сказать, как или почему работает ваш ответ.

— ifconfig