Текст нокаута SVG онлайн урок.


Идея здесь состоит в том, чтобы представить три слоя, уложенных друг на друга, где верхний слой используется для вырезания фигуры во втором слое, чтобы выявить третий слой.

Если текст на верхнем слое диаграммы выше был формой, которую мы вырезаем из второго слоя, то следующее изображение иллюстрирует концепцию текста нокаута.

# SVG Snippet

Вот фрагмент, который устанавливает нижний слой (.knockout), который будет отображаться текстом нокаута, средний слой (.knockout-text-bg), который мы вырезают и верхний слой (.knockout-text), который содержит текст SVG, который будет действовать как маска для вырезания второго слоя.

<div class="knockout">

<svg class="knockout-text-container" width="100%" height="100%">

<rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)" />

<mask id="knockout-text">
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
<text x="50%" y="50%" fill="#000" text-anchor="middle">Knock Out Text</text>
</mask>

</svg>

</div>

& lt; text & gt; В этом примере координатыполностью произвольны и могут быть скорректированы в соответствии с фактическим размером и размещением добавляемого текста.

Обратите внимание, чтоfillвторого слоя является черным, аfillверхнего слоя - белым. Вот как работают маски: белый - идеальный контраст с черным и спрячет черные части. Мы могли бы сделать верхний слой совершенно другим цветом, и он не полностью скроет черный цвет, но позволит ему проскользнуть.

# CSS Styling

Остальное - это стилизация CSS. Например, мы можем добавить градиент фона к нижнему слою и создать размер шрифта, чтобы получить больше драматического эффекта.

.knockout {
/* Ensure the bottom layer is full screen */
height: 100vh;
width: 100%;
/* Add a colorful texture and cutom font-styling */
background-image: linear-gradient(to left, #ff4e50 , #f9d423);
text-transform: uppercase;
}

/* Knockout text font sizing for each line */

text:nth-child(2) {
font-size: 5em;
}

text:nth-child(3) {
font-size: 5.1em;
}

text:nth-child(4) {
font-size: 15em;
}

См. Pen SVG Knock Out Text Джеффа Грэма ( @geoffgraham ) на CodePen .