Итак, задача: перечеркнуть слово или блок текста или картинку диагональными линиями крест-накрест. Нам поможет SVG.
Напишем стили для строчного тега del
и подготовим класс для перечёркивания блочных элементов .del-cross
.
del.cross {
display:inline-block; /* запрещает перенос текста на следующую строку */
text-decoration:none;
position:relative;
}
.del-cross {
display:block;
position:relative;
overflow:hidden; /* запрещает обтекать другие блоки */
}
del.cross:before,
.del-cross:before {
content:'';
position:absolute;
display:block;
width:auto;
height:auto;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(0,0,0,0) url(cross.svg) no-repeat;
background-size:100% 100%; /* растягивает фон на всю ширину и высоту блока */
}
Пример:
Для картинок класс .del-cross
нужно ставить на их обёртку. Тег img
не имеет псевдокласса :before
.
А теперь посмотрим, что внутри SVG-файла, и как настроить цвет и толщину линий.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
<line x1="0" y1="0" x2="100" y2="100" vector-effect="non-scaling-stroke" />
<line x1="0" y1="100" x2="100" y2="0" vector-effect="non-scaling-stroke" />
</svg>
viewBox="0 0 100 100"
— задает виртуальный размер картинки 100×100 безразмерных единиц. Формат записи: x1 y1 x2 y2
.
preserveAspectRatio="none"
— отключает сохранение пропорций при масштабировании.
vector-effect="non-scaling-stroke"
— чтобы толщина линий не зависела от размеров картинки. К сожалению, не работает в IE9 и IE10.
style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5"
— цвет линий можно задавать как в hex, так и в rgba с прозрачностью, а толщину линий делать дробной.
Поддержка браузерами
SVG не поддерживается IE8 и ниже. Да и в IE9-IE10 толщина линий изменяется пропорционально размерам перечёркиваемого блока, что есть баг. Есть решение.
Для браузеров, не поддерживающих SVG, можно сделать деградацию с помощью условных комментариев или наоборот, используя Modernizer, сделать прогрессивное улучшение только для тех, кто умеет отображать SVG.
Обновлено 9 апреля 2013
В комментариях GreLI подсказал, что SVG-файл можно сократить до такого вида (cross.svg):
<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
<line x1="0" y1="0" x2="100%" y2="100%" />
<line x1="0" y1="100%" x2="100%" y2="0" />
</svg>
Задавая координаты линий в процентах, мы избавляемся от необходимости применять vector-effect="non-scaling-stroke"
, который не работает в IE9 и IE10.