Soru CSS: satır içi SVG öncesinde


Güncelleştirme 
Oluşturulan içerik ile değiştirilen öğeler arasındaki ilişkiyi vurgulamak için teşekkürler.
Bu konuyla ilgilenen bu makaleyi buldum:
http://red-team-design.com/css-generated-content-replaced-elements/

İlginçtir ki, "CSS3 Tarafından Oluşturulan ve Değiştirilen İçerik Modülü" başlıklı bir W3C dokümanı (11 yıl önce!) Sözde elementi tanımlar. :outsideüretilen içeriği, değiştirilen öğelerle değiştirerek, oluşturulan içeriği içeriye eklemek yerine, değiştirilen öğenin dışına yerleştirerek bir çözüm sunabilir.


Orijinal soru

CSS kullanarak bir satır içi SVG elemanını şekillendirmenin bir yolu var mı :before ve :after sözde elemanları?

Örnek: http://jsfiddle.net/wD56Q/

Bu örnekte, ile tanımlanan stil :before SVG'ye uygulanmaz (Firefox 29 ve Chrome 35'te test edilmiştir). Bu hakkında mı content mülk :before? Okuduğum şey için, oluşturulan bir içeriği elemanın içine sokmaya çalışır .. SVG ile başarısız olan nedir?


MDN'den ilgili belgeler:

:: önce (: önce)

:: önce, ilk çocuğu olan sahte bir öğe yaratır.   öğe eşleşti. Genellikle bir öğeye kozmetik içerik eklemek için kullanılır.   içerik özelliğini kullanarak. Bu öğe varsayılan olarak satır içidir.

içerik

İçerik CSS özelliği :: before ve :: after ile kullanılır   Bir öğede içerik oluşturmak için sözde öğeler. Eklenen nesneler   içerik özelliğini kullanmak anonim değiştirilmiş öğelerdir.


Örnekte kod:

   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>


35
2018-06-03 23:09


Menşei




Cevaplar:


Hayır, satır içi SVG bir görüntü olarak kabul edilir ve görüntüler değiştirilen elemanlar sahip olmayanlar oluşturulan içerik.

Kesinlikle konuşmak gerekirse, undefined. CSS 2.1 sadece genel olarak "görüntüler, gömülü belgeler ve küçük uygulamalar" dan bahseder HTML standardı görüntü için tanımlar, ancak SVG'yi açıkça değil.


35
2018-06-03 23:45



Kesinlikle bir konuşma <button> eleman kutu oluşturulan içeriği içerir; onun input elemanlar dahil type="button") bu olamaz. - David Thomas
Cevaplar için teşekkür ederim! Güncellemede bağlandığım makale, Chrome'un izin verdiği sayaç örneğini referans alıyor :after üzerinde input öğesi. Bununla birlikte, bunun muhtemelen amaçlanan bir davranış olmadığını da dikkate aldıklarını belirtiyorlar. - danbal
MDN'den: "CSS'de, değiştirilmiş bir öğe, temsilleri CSS'nin kapsamı dışında olan bir öğedir. Bunlar, temsilleri CSS'den bağımsız olan harici nesnelerdir." - Örnek olarak SVG'yi hiç bulamadığım halde, bu kategoriye girmelidir. - danbal
Satır içi SVG görüntü olarak kabul edilirse, HTML satırımdaki CSS'yi satır içi SVG'nin tek tek bölümlerini stillemek için neden kullanabilirim? - John Slegers
@DavidThomas, noktanızı açıklayabilir misiniz? SVG, belirli öğeler için içeriği CSS'ye ayarlamaya izin veriyor mu? - YakovL