Text with Image Background in Svg or CSS

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);

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:

Full code:

path {

  stroke: #000;

  stroke-width: 3px;

  stroke-linejoin: round;

  stroke-linecap: round;

}

<svg width="1000" height="700">

    <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->

    <defs>

        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">

                    <image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" />             

            </pattern>

    </defs>

    <path d="M5,5

        l0,680 l980,0 l0,-680 l-980,0"          

        fill="url(#img1)" />

</svg>

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 id='decorative-text-link' 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 id='squiggle_link_text' 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");

}

<div></div>

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

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

CSS

.svg .number {
  font-size: 19px;
  pointer-events: none; /* <-- Add This */
}

JSFiddle

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.

http://codepen.io/Fortyseven/pen/ZGwOvR

<style>
    .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;
    }
</style>
<div class="icon">
    <div class="badge">
        <svg xmlns="http://www.w3.org/2000/svg"><circle cx="6.5" cy="6.5" r="6.5" fill="red" /></svg>
        <div class="text">99</div>
    </div>  
</div>

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,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'>"+
    "  <path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>\")",
  "font-size": "30px"
});

Example: http://jsfiddle.net/SJjJb/1427/

Using SVG as background image

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

Here is bulletproff solution:

Your html:
<input class='calendarIcon'/>

Your SVG:
i used fa-calendar-alt

(any IDE may open svg image as shown below)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>

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,***<here place encoded svg>***");
      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

<svg xmlns="" path="" fill="#f00"/></svg>

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);
    }

---

Related Topics