是否有一种方法可以使用SVG作为伪元素中的内容：before或：after [英] Is there a way to use SVG as content in a pseudo element :before or :after

问题描述

我想在一些选择的元素之前放置一些SVG图像。我使用JQuery，但这是不相关的。我想要有：before元素为：

I want to place some SVG images before some selected elements. I am using JQuery but that is irrelevant. I would like to have the :before element to be as:

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

如果我如上所示，它只显示字符串。我检查规格，似乎有一些限制，什么内容可以是。有这样的限制吗？只有内容css与我的问题相关。

If I do it as shown above, it just display the string. I checked the specs and there seems to be some restrictions on what content can be. Is there a work around to this restriction? Only the content css is relevant to my question.

推荐答案

抱歉，不，规格说明， content 属性仅支持生成的文本内容，没有html，svg的东西或标签。

Sorry, no, the spec says, the content property only supports generated textual content, no html, svg stuff, or tags at all.

是的，可以！只是测试这个，它的工作伟大，这是真棒！它仍然不能与html，但它与svgs。

Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svgs.

在我的index.html我有：

In my index.html I have:

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

我的test.svg看起来像这样：

And my test.svg looks like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <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> 

这篇关于是否有一种方法可以使用SVG作为伪元素中的内容：before或：after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！