CSS：内联SVG之前

Question

更新
感谢porneL指出了生成的内容和替换的元素之间的关系。

有趣的是，名为“CSS3生成和替换的内容模块”的W3C文档（从11年前开始！）定义了伪元素:outside，该伪元素可以通过将生成的内容放置在替换的元素之外来提供使用生成的内容的解决方案。，而不是尝试将其附加到内部。

原始问题

有没有一种使用CSS:before和:after伪元素来样式化内联SVG元素的方法？

在此示例中，使用定义的样式:before不适用于SVG（在Firefox29和Chrome35中测试）。与中的content财产有关:before吗？就我所读的内容而言，它尝试在元素中插入生成的内容。.SVG是否失败？

MDN的相关文档：

:: before（：before）

:: before创建一个伪元素，它是匹配元素的第一个子元素。通常用于通过使用content属性将修饰内容添加到元素。默认情况下，此元素是内联的。

内容

content CSS属性与:: before和::after伪元素一起使用，以在元素中生成内容。使用content属性插入的对象是匿名替换的元素。

示例中的代码：

   svg {

     left: 50px;

     position: absolute;

     top: 50px;

   }

   svg circle {

     fill: green;

   }

   svg:before {

     border: 2px solid blue;

     content: "";

     height: 100px;

     margin: -6px;

     padding: 4px;

     position: absolute;

     width: 100px;

     z-index: -1;

   }

   div {

     background-color: green;

     height: 100px;

     left: 200px;

     position: absolute;

     top: 150px;

     width: 100px;

   }

   div:before {

     border: 2px solid blue;

     content: "";

     height: 100px;

     margin: -6px;

     padding: 4px;

     position: absolute;

     width: 100px;

     z-index: -1;

   }


<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">

  <circle cx="50" cy="50" r="50" />

</svg>



<div></div>

Answer 1

不，嵌入式SVG被视为图像，并且图像被 替换 为不允许具有 生成内容的 元素 。

严格来说，我认为它是不确定的。CSS2.1只是一般地讨论“图像，嵌入式文档和小程序”，而HTML标准则是针对图像而不是SVG进行定义的。