SVG text as HTML background

И що чак сега се сетих, че мога да ползвам SVG text като background?! И не само текст. Че даже мога да си го променям динамично през javascript! Така някои дизайни можеше да станат по-фън-шуй. По-добре късно от колкото без SVG.
Едно примерче:

<!DOCTYPE html>

<button onclick="myFunction()">Try it</button>

<p style="min-height: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

function myFunction() {
   let txt = "SVG Txt";

   let s = window.btoa(`
<svg height="400" width="800" xmlns="">
   <text x="0" y="120" font-weight="bold" font-size="160" fill="#fef" stroke="#ddd">${txt}</text>

   document.querySelector("p").style.background = `url('data:image/svg+xml;base64,${s}') no-repeat top left`;


Demo: text_as_background.html

Share and Enjoy !


Leave a Reply

Your email address will not be published. Required fields are marked *