有没有一种方法可以将SVG用作伪元素：before或：after中的内容

245

我想在某些选定元素之前放置一些SVG图像。我正在使用JQuery，但这无关紧要。我想将：before元素设置为：

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

如果我如上所示进行操作，它将仅显示字符串。我检查了规格，似乎对内容有一些限制。是否可以解决此限制？只有内容CSS与我的问题有关。

css svg

— 阳光明媚
source

1

将其用作背景图像有问题吗？

— cimmanon

1

我想用它来生成指向JQuery UI工具提示的精美指针。我现在用CSS伪元素hack做到这一点，但这只给了我三角形。在这种情况下，背景图片将无法工作，因为我需要元素之外的内容。

— 2013年

252

是的你可以！刚刚测试过，效果很好，太棒了！它仍然不适用于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>

— 德兹曼
source

18

除非SVG特殊，否则您应该能够像对待图像一样对待它们content: url(path/to/my.svg)。不过，这不一定意味着它可以与jQuery UI工具提示库一起使用。

— cimmanon

1

@cimmanon嗯，太好了，我想测试一下。因此，在my.html或任何我可以使用一堆html代码进行呈现的过程中……听起来真棒。

— dezman

2

你为什么想做这个？如果文件中已经包含svg代码，则无需将其放入伪类中。伪类的全部要点是当您想添加一些内容时减少DOM元素，但是在您的情况下，如果您通常只使用svg代码，那么将其放入伪类中不会比（更干净）更糟糕。 -class（这也可能是不可能的）。当然，除非您要将svg代码放在很多位置，否则，您应该只将svg代码保存在一个单独的文件中，例如图像。

— dezman

6

不幸的是，我认为该解决方案不适用于SVG精灵。例如，content: url(mysprite.svg#my-icon)实际上不会拉起您的图标。我想证明自己是错的，但是:)

— 杰森（Jason）

1

@watson，语义。HTML =结构，CSS =表示形式。如果SVG具有装饰性，则不应使用HTML结构，而应使用CSS。

— 死锁

137

是。您可以将SVG添加为空的：after或：before的背景图像。干得好：

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

— 德克洛普
source

4

经过一段时间的寻找，我发现这是最好的解决方案之一。您可以控制插入元素的每个方面，并以独立的逻辑以CSS样式表的正常工作方式工作。太好了

— Danielo515 2014年

...啊，这使我寄予厚望，直到我意识到background-sizeOpera Mini不支持它。这真令人沮丧。

— 死锁

很棒。@deathlock，在您定义svg本身的尺寸时，不需要背景大小，我不需要。

— 埃里克·索克

1

应该是被接受的答案，因为问题是说“在伪元素中：之前或之后”

— ZalemCitizen

我必须将其添加<?xml version="1.0" encoding="utf-8"?>到我的svg文件的开头，以使其起作用。

— Nicolas Boisteault，

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。

— 珍妮
source

8

由于SVG通常使用双引号，因此您也可以只使用外部单引号。如果您不想使用外部SVG文件，@ Jenny的建议是一种很好的方法。

— Micros

2

这很棒。不幸的是，它仅对我适用于Chrome（已在Chrome，Firefox和Edge上测试）。

— Arsen

2

好的，它适用于FF。只需注意“ no＃”部分。还要确保使用div标签（似乎不适用于span）。遗憾的是Edge仍然没有成功。

— 阿森

像许多出色的解决方案一样，IE11不支持它。url('file.svg')但是有效。

— 鲍勃·斯坦

6

我发现重要的是添加xmlns='http://www.w3.org/2000/svg'<svg>部分以在Chrome 66.x中工作。例如-小V型将是：

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可以带来额外的有趣好处，例如快速加载和减少请求，并且我们可以使用image / base64获得IE8支持：

使用SVG的Codepen样本

的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......);

— 一个儿子
source

但这不是可扩展的，不是吗？我无法将其大小调整为16px或320px。

— 死锁

@deathlock当然可以缩放，尽管不是我的示例，因为它具有固定的大小集，即80px宽/高。

— 阿森

1

@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的便捷工具

— 阿列克谢·扎巴布林
source

5

小心所有其他答案在IE中都存在一些问题。

让我们来看看这种情况-带前置图标的按钮。所有浏览器都可以正确处理此问题，但是IE会采用元素的宽度并缩放内容之前的内容以适合它。 JSFiddle

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

解决方案是将size设置为element之前，然后将其保留在原处：

#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渲染

— 兹比奇
source

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>

展开摘要

— 雅各布·穆达（Jakub Muda）
source

-1

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

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

— 迈克尔·阿尔范德
source

3

您应该多解释一些答案。仅仅由此，很难说出答案的工作方式或原因。

— ifconfig