Html svg text background

3 трюка для добавления текстуры в ваш текст с CSS и SVG

Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!

CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых раньше использовался Фотошоп. Кроме того, для этого вы также можете использовать SVG.

Сегодня мы рассмотрим эти опции и даже сделаем несколько простых анимаций. Если вы хотите продолжить самостоятельно, один на один с кодом, вы можете загрузить исходные файлы здесь.

Поддержка браузерами

Как и следовало ожидать, некоторые из этих свойств, которые мы будем использовать, поддерживаются не повсеместно. Это означает, что они не будут работать в браузерах вроде IE и Firefox.

Создание фонового подвижного изображения текста с помощью BACKGROUND-CLIP

Первая опция, которую мы рассмотрим, это свойство background-clip. Это свойство определяет, будет ли фон продлён за границы или нет. Оно позволяет тексту определённого элемента обрезать изображение.

HTML

Наш макет — это просто h1 с классом bgClip:

А теперь давайте добавим магии в CSS…

CSS

Мы добавим текстуру ночного неба к нашему изображению. Мы также убедимся, что текст отображён со сглаживаем, используя font-smoothing. Обратите внимание, что для этой работы цвет текста должен быть прозрачным, поэтому мы также используем text-fill-color:transparent.

А теперь просто добавим немного анимации, чтобы сделать фон более привлекательным:

-webkit-animation:BackgroundAnimated 15s linear infinite; -moz-animation:BackgroundAnimated 15s linear infinite; -ms-animation:BackgroundAnimated 15s linear infinite; -o-animation:BackgroundAnimated 15s linear infinite; animation:BackgroundAnimated 15s linear infinite; > @keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-webkit-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-ms-keyframes BackgroundAnimated to < background-position:100% 0 >> @-moz-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >>

Клипуем текст с использованием SVG

Следующая техника, которую мы рассмотрим, это SVG клиппинг. Наподобие приведённому выше методу CSS, SVG также позволяет вам клиповать текст изображением, используя свойство clipPath. Обычно свойство clipPath содержит форму атрибутов, таких как круг или квадрат, но вы также можете использовать текст.

SVG

Видите, я использую HTML элемент img для клиппинга изображения.

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

CSS

А теперь всё, что нам нужно, это использовать свойство clip-path для наложения на SVG контуров видимого изображения:

Тест под маской с помощью MASK-IMAGE

Последняя техника, которую мы собираемся рассмотреть, — это текстурирование текст с помощью mask-image. Базовая функциональность этого свойства в том, что оно будет вырезать область текста, которая видна в соответствии с прозрачностью.

HTML

Всё, что нам нужно, это один элемент h1 обёрнутый в div:

CSS

Чтобы наложить маску на изображение с помощью текста, мы будем использовать -webkit-mask-image, который задаст изображение и мы также добавим клёвый text-shadow для улучшения вида. Наконец, я хочу внести дополнительную гладкость при эффекте наведения, когда весь текст становится видимым (просто потому что мы можем):

#maskText h1 < font-size: 200px; font-family: 'Lilita One', sans-serif; color: #ffe400; text-shadow: 7px 7px 0px #34495e; text-transform: uppercase; text-align: center; margin: 0; display: block; -webkit-mask-image: url('../images/texture.png'); -webkit-transition:all 2s ease; -moz-transition:all 2s ease; -o-transition:all 2s ease; transition:all 2s ease; >#maskText h1:hover < -webkit-mask-image: url('../images/texture-hover.png'); cursor: pointer; color: #ffe400; >

Заключение

Отлично! Вы только что научились новым трюкам с текстом. Эти навыки сберегут ваше время и отгородят вас от Фотошопа. Ещё важнее то, что они динамические (их можно менять «на лету»), в отличие от того же jpg.

CSS и SVG проделали долгий пусть, и техники вроде этих станут стандартом в ближайшие несколько лет, когда все основные браузеры научаться их понимать.

Оставьте ответ Отменить ответ

📅 С 20 по 22 апреля пройдут незабываемые битвы среди кибер-гладиаторов в мире информационной безопасности!

Открыта регистрация команд по ссылке .

Источник

Background Color of Text in Svg

No this is not possible, SVG elements do not have background-. presentation attributes.

To simulate this effect you could draw a rectangle behind the text attribute with fill=»green» or something similar (filters). Using JavaScript you could do the following:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
rect.setAttribute("x", SVGRect.x); 
rect.setAttribute("y", SVGRect.y); 
rect.setAttribute("width", SVGRect.width); 
rect.setAttribute("height", SVGRect.height); 
rect.setAttribute("fill", "yellow"); 
ctx.insertBefore(rect, textElm);

SVG text background color with border radius and padding that matches the text width

if you can use script, you can use this little function. It handles some of the CSS values. You could however implement whatever you need.

function makeBG(elem) < var svgns = "http://www.w3.org/2000/svg" var bounds = elem.getBBox() var bg = document.createElementNS(svgns, "rect") var style = getComputedStyle(elem) var padding_top = parseInt(style["padding-top"]) var padding_left = parseInt(style["padding-left"]) var padding_right = parseInt(style["padding-right"]) var padding_bottom = parseInt(style["padding-bottom"]) bg.setAttribute("x", bounds.x - parseInt(style["padding-left"])) bg.setAttribute("y", bounds.y - parseInt(style["padding-top"])) bg.setAttribute("width", bounds.width + padding_left + padding_right) bg.setAttribute("height", bounds.height + padding_top + padding_bottom) bg.setAttribute("fill", style["background-color"]) bg.setAttribute("rx", style["border-radius"]) bg.setAttribute("stroke-width", style["border-top-width"]) bg.setAttribute("stroke", style["border-top-color"]) if (elem.hasAttribute("transform")) < bg.setAttribute("transform", elem.getAttribute("transform")) >elem.parentNode.insertBefore(bg, elem)>

var texts = document.querySelectorAll("text")for (var i = 0; i

text < background: red; border-radius: 5px; border: 2px solid blue; padding: 5px>
text:nth-of-type(2) < background: orange; border-color: red>
g text

SVG — Text with background color and rounded borders

You can do this with a filter in two alternative ways:

1. Do a flood, blur it, then clip the low opacities, then dial up the remaining opacity to full
2. Smuggle in a rounded corner rect via feImage and use relative sizing to stretch it

In both cases padding is relative so if your text is too long, the rounded corners will overflow the filter area. Unlike CSS, you can’t combine relative and absolute sizings in SVG (well SVG 1.1 at least). So this is as good as you get.

Since you’re really looking for HTML text behavior but you want it in SVG, you might want to consider using a foreignObject and embedding HTML text that way.

  
       
Blur & opacity filter But the x padding is relative and overflows with long text feImage and a rect filter But you still can't get away from relative padding 

Change background-color in svg-imge with text inside it

To achieve this, you need to add pointer-events: none; to your tag.

.svg .number font-size: 19px; 
pointer-events: none; /* >

SVG text color with correspond to background

The approach to use clip paths has already been described by squeamish ossifrage’s answer. I have put together a working snippet doing it the d3 way:

var svg = d3.select("body") .append("svg") .attr(< width: 400, height: 400 >);
var textOut = svg.append("text") .attr(< x: 120, y: 66 >) .style(< fill: "black", stroke: "none" >) .text("Description");
var rect = svg.append("rect") .attr(< id: "rect", x: 50, y: 50, width: 100, height: 20 >) .style(< fill: "limegreen", stroke: "darkgreen" >);
svg.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#rect");
var textIn = svg.append("text") .attr(< x: 120, y: 66 >) .style(< fill: "white", stroke: "none", "clip-path": "url(#clip)" >) .text("Description");

How to change the color of an svg element?

You can’t change the color of an image that way. If you load SVG as an image, you can’t change how it is displayed using CSS or Javascript in the browser.

If you want to change your SVG image, you have to load it using , or using inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

#time-3-icon < fill: green;>
.my-svg-alternate < display: none;>.no-svg .my-svg-alternate

Источник

Text with Image Background in Svg or CSS

No this is not possible, SVG elements do not have background-. presentation attributes.

To simulate this effect you could draw a rectangle behind the text attribute with fill=»green» or something similar (filters). Using JavaScript you could do the following:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
rect.setAttribute("x", SVGRect.x); 
rect.setAttribute("y", SVGRect.y); 
rect.setAttribute("width", SVGRect.width); 
rect.setAttribute("height", SVGRect.height); 
rect.setAttribute("fill", "yellow"); 
ctx.insertBefore(rect, textElm);

Add background image in SVG

Correct a syntax error in the path, you are missing a » at the end and remove fill:none from CSS that is overriding the fill attribute used with the path:

path  
stroke: #000;
 
stroke-width: 3px;
 
stroke-linejoin: round;
 
stroke-linecap: round;

>

How to make SVG textPath work in div background-image via CSS?

You have a syntax error in your SVG, a stray ; outside the attribute quotes instead of inside.

You’ve also not URL encoded the # characters which is invalid per the appropriate specifications and won’t work in Firefox.

I’ve corrected these issues below.

html, body, div  
width: 100%;
 
height: 100%;

>

div  
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg role='link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 10'%3E %3Cdefs%3E %3Cpath style='stroke:none;' fill='none' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E %3C/defs%3E %3Cg style='font-family:Lato; font-size:.1rem'%3E %3Cuse xlink:href='%23squiggle_link_text'/%3E %3Ctext%3E %3CtextPath xlink:href='%23squiggle_link_text'%3EThere is a link%3C/textPath%3E %3C/text%3E %3C/g%3E %3C/svg%3E");

>

Change background-color in svg-imge with text inside it

To achieve this, you need to add pointer-events: none; to your tag.

.svg .number font-size: 19px; 
pointer-events: none; /* >

Making text relative to background svg in HTML5

I rearranged things a bit, but this seems to do the trick. Even works with triple-digits. Bit cramped, but it works.

 
.icon < 
background: url("http://betanews.com/wp-content/uploads/2015/06/win10-logo.jpg"); 
background-size: 30px 30px; 
width: 30px; 
height: 30px; 
> 
.badge < 
position: relative; 
top: 5px; 
left: 15px; 
> 
.badge svg, 
.badge .text width: 15px; 
height: 15px; 
> 
.badge .text < 
font-size: xx-small; 
color: white; 
position: absolute; 
text-align: center; 
top: 1px; 
left: -1px; 
> 
 
 
 
99
 

How to set the background-image of this text to an svg?

To the degree that unencoded DATA URIs work at all (some browsers insist on Base-64 encoding), you’ll still want to quote the contents of url() , albeit with escaped quotes:

$('span').css( 'background-image': 
"url(\"data:image/svg+xml;utf8,
" \")", 
"font-size": "30px"
>);

Using SVG as background image

With my solution you’re able to get something similar:

Here is bulletproff solution:

Your SVG:
i used fa-calendar-alt

(any IDE may open svg image as shown below)

To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address)

As far as you got all stuff you need, you’re coming to css

.calendarIcon //your url will be something like this: 
background-image: url("data:image/svg+xml,******"); 
background-repeat: no-repeat; 
>

Note: these styling wont have any effect on encoded svg image

. fill: #f00; //neither this 
background-color: #f00; //nor this
>

because all changes over the image must be applied directly to its svg code

To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:

.calendarIcon background-image: url("data:image/svg+xml,%3Csvg. svg%3E"); 
background-repeat: no-repeat; 
padding-right: calc(1.5em + 0.75rem); 
background-position: center right calc(0.375em + 0.1875rem); 
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); 
>

Источник

Оформление текста в SVG

SVG тег определяет графический элемент, содержащий текст. Как и к любому другому, к нему можно применить градиент, шаблон, окантовку, маску или фильтр.

При изменении текста, возможно придется менять его размер и положение, а также параметры окна отображения viewBox

Обычный текст с обводкой

Текст с анимированной обводкой

В данном примере можно использовать до 5-ти различных цветов контура каждой буквы

Градиентный текст

Смещающийся и печатающийся текст

Смещающийся и печатающийся текст

3D текст

Похожий вариант на CSS можно посмотреть в теме 3D текст на CSS

Текст с фоновым изображением

Эффект жидкого текста

Заполняющийся текст

Последний вариант

Смотрите также:

Вывод текста по окружности

Небольшая библиотека CircleType.js для написания текстов по окружности

Круговая пульсация на элементах

Эффект круговой пульсации при наведении на кнопку, ссылку или блок

Глассморфные кнопки

Глассморфные (стекломорфные) кнопки с ховер-эффектом

Добавить комментарий:

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

Блин, да вы волшебник, который открывает простые способы! ))))
Честно — я раньше анимированную обводку реализовал через танцы с бубнами, использовая кучу приложений и все перегоняя в гифку в итоге. А тут все так просто оказывается.

• Создание и оформление сайтов
  • Тексты, ссылки и кнопки
  • Вкладки, блоки и списки
  • Секции
  • Меню и аккордеоны
  • Модальные окна
  • Слайдеры и карусели
  • Формы
  • Фото, аудио и видео
  • Фоны и паттерны
  • Картинки и иконки
  • Карты и геолокация
  • Прокрутка и скроллбары
  • Весь сайт
  • HostCMS
  • WordPress
  • Фоновые анимации на JS

  

  Источник