Блог

Главная - Вопросы по программированию - CSS: до встроенного SVG

CSS: до встроенного SVG

#javascript #html #css #svg #canvas

#css #HTML #svg #псевдо-элемент

Вопрос:

Обновить
Спасибо porneL за указание на связь между сгенерированным контентом и замененными элементами.
Я нашел эту статью, которая посвящена именно этой теме:

Достаточно интересно, что документ W3C под названием «CSS3 Сгенерированный и замененный модуль содержимого» (от 11 лет назад!) Определяет псевдоэлемент :outside , который может предложить решение для использования сгенерированного содержимого с замененными элементами, путем размещения сгенерированного содержимого вне заменяемого элемента, вместо того, чтобы пытаться добавить его внутрь.

Оригинальный вопрос

Есть ли способ стилизовать встроенный элемент SVG с помощью CSS :before и :after псевдоэлементов?

Пример: http://jsfiddle.net/wD56Q /

В этом примере стиль, определенный с :before помощью, не применяется к SVG (протестировано в Firefox 29 и Chrome 35). Речь идет о content свойстве в :before ? Для того, что я прочитал, он пытается вставить сгенерированный контент в элемент .. это то, что не удается с SVG?

Соответствующая документация из MDN:

::перед (:перед)

::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>

Ответ №1:

Нет, встроенный SVG обрабатывается как изображение, а изображения заменяются элементами, которым не разрешено иметь сгенерированный контент.

Строго говоря, я думаю, что это неопределенно. CSS 2.1 просто говорит об «изображениях, встроенных документах и апплетах» в целом, и стандарт HTML определяет его для изображений, но не для SVG явно.

Комментарии:

1. Строго говоря <button> , элемент может содержать сгенерированный контент; это input элементы (включая элементы type="button" ), которые не могут.

2. Спасибо за ответы! Статья, на которую я ссылался в обновлении, ссылается на встречный пример, где Chrome допускает использование :after input элемента. Однако они отмечают, что это, вероятно, не предполагаемое поведение.

3. Из MDN: «В CSS заменяемый элемент — это элемент, представление которого выходит за рамки CSS. Это своего рода внешние объекты, представление которых не зависит от CSS. » — Хотя я никогда не находил SVG, упомянутый в качестве примера, он должен попасть в эту категорию.

4. Если встроенный SVG обрабатывается как изображения, то почему я могу использовать CSS в моем HTML-документе для оформления отдельных частей моего встроенного SVG?

5. @DavidThomas не могли бы вы уточнить свою точку зрения? Позволяет ли SVG настраивать содержимое с помощью CSS для определенных элементов?