How to Apply a Color to a Svg Text Element

How to apply a color to a SVG Text element

Setting the class is correct but the CSS color property has no effect on SVG. SVG uses fill and stroke properties. In your case you probably just need to change color to fill. This displays yellow text for me in Firefox.

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            fill: yellow;
        }
    </style>
    <h2>SVG - Sandbox</h2>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
            <text x="65" y="40" class="caption">Fact</text>
        </svg>
    </div>
</body>
</html>

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 <object>, <iframe> or using <svg> 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.

See :

#time-3-icon {   fill: green;}
.my-svg-alternate {  display: none;}.no-svg .my-svg-alternate {  display: block;  width: 100px;  height: 100px;  background-image: url(image.png);}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/></svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Changing the color of individual characters in an SVG text element

You can use setAttribute instead of setAttributeNS to set the color.

For example:

<script>
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute('style', 'border: 0px solid black');
  svg.setAttribute('width', '600');
  svg.setAttribute('height', '250');

  //Text
  var newText = document.createElementNS("http://www.w3.org/2000/svg","text");
  newText.setAttributeNS(null,"x",20);      
  newText.setAttributeNS(null,"y",100);   
  newText.setAttribute('style', 'font-size:24px');

  //Text span
  var txtSpan1 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan1.textContent = "Eins";
  newText.appendChild(txtSpan1);

  //Text span with color
  var txtSpan2 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan2.textContent = "t";
  txtSpan2.setAttribute('style', 'fill:green');
  newText.appendChild(txtSpan2);

  //Text span without color
  var txtSpan3 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan3.textContent = "e";
  newText.appendChild(txtSpan3);
  var txtSpan4 = document.createElementNS("http://www.w3.org/2000/svg","tspan");

  svg.appendChild(newText);
  document.body.appendChild(svg);

</script>

jsFiddle for another way to do the text coloring using innerHTML property of text element.

How to change color on svg and text at same time when hover?

Wrap the text in a span, and use correct z-index as well as selector for svg hover #den-otvorenych-dveri:hover svg{}:

#den-otvorenych-dveri-container {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  padding: 20px;
}

#den-otvorenych-dveri-img {
  width: 100%;
  height: auto;
  fill: #d63c41;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 0;
}

#den-otvorenych-dveri {
  text-transform: uppercase;
  text-decoration: none;
  width: 150px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-top: 20px;
  font-size: 0.8em;
  text-shadow: 1px 1px 10px #333;
}

#den-otvorenych-dveri span {
  position: relative;
  z-index: 1;
}

#den-otvorenych-dveri:hover {
  color: #d63c41;
}

#den-otvorenych-dveri:hover svg {
  fill: yellow;
}

<div id="den-otvorenych-dveri-container">
  <a href="#" id="den-otvorenych-dveri">
    <span>Deň<br/>otvorených<br/>dverí</span>
    <svg id="den-otvorenych-dveri-img" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
      <path d="m23.363 8.584-7.378-1.127-3.307-7.044c-.247-.526-1.11-.526-1.357 0l-3.306 7.044-7.378 1.127c-.606.093-.848.83-.423 1.265l5.36 5.494-1.267 7.767c-.101.617.558 1.08 1.103.777l6.59-3.642 6.59 3.643c.54.3 1.205-.154 1.103-.777l-1.267-7.767 5.36-5.494c.425-.436.182-1.173-.423-1.266z"/>
    </svg>
  </a>
</div>

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

Can't set color of SVG text through JavaScript

SVG Text is not HTML text. It has a different set of CSS properties - some of which overlap with HTML text, but not all - e.g. there is no border attribute for SVG text. And there is no "color" attribute (you want "fill")

Please read the documentation on the text element:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

How to Apply a Color to a Svg Text Element