CSS：之前的内联SVG

问题描述

更新

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

我发现这篇文章涉及到这个主题：

有趣的是，W3C文档标题为CSS3生成和替换内容模块（从11年前！）定义伪元素：outside ，它可以通过将生成的内容放置在替换的元素之外来提供对使用具有替换的元素的生成内容的解决方案，而不是尝试将其附加在。

原始问题 b

有没有办法使用CSS ：在和之前的样式内联SVG元素：after 伪元素

示例：

在此示例中，：之前定义的样式是不适用于SVG（在Firefox 29和Chrome 35中测试）。
是关于中的 content 属性：before ？对于我读的，它试图在元素中插入一个生成的内容..是什么失败的SVG？

MDN的相关文档：

示例中的代码：

  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 =100width = 100xmlns =http://www.w3.org/2000/svg> < circle cx =50cy =50r =50/>< / svg>< div>< / div>  

/ div>

解决方案

否，内联SVG被视为图片， 。

严格来说，我认为这是未定义的。 一般介绍了图片，嵌入的文档和小程序以及为图片定义，但不显式定义SVG。

Update
Thanks porneL for pointing out the relation between generated content and replaced elements.
I found this article which deals with this very topic:
http://red-team-design.com/css-generated-content-replaced-elements/

Interestingly enough, a W3C document titled "CSS3 Generated and Replaced Content Module" (from 11 years ago!) defines the pseudo-element :outside, which could offer a solution to using generated content with replaced elements, by placing the generated content outside the replaced element, instead of trying to append it inside.

Original question

Is there a way to style an inline SVG element using the CSS :before and :after pseudo-elements?

Example: http://jsfiddle.net/wD56Q/

In this example, the styling defined with :before is not applied to the SVG (tested in Firefox 29 and Chrome 35).Is it about the content property in :before? For what I read, it tries to insert a generated content in the element.. is it what fails with SVG?

Related documentation from MDN:

The code in the example:

   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>

解决方案

No, inline SVG is treated as an image, and images are replaced elements which are not allowed to have generated content.

Strictly speaking, I think it's undefined. CSS 2.1 just talks about "images, embedded documents and applets" in general and The HTML standard defines it for images, but not SVG explicitly.

这篇关于CSS：之前的内联SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！