CSS Background Property for Svg text element is being ignored

Question

So i have the following css i wish to add to all of my text svg elements:

text{
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); 
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

Basicly this should create the text as a speech bubble.

However it seems that the following lines are being ignored:

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background: -moz-linear-gradient(#f9d835, #f3961c);
    background: -o-linear-gradient(#f9d835, #f3961c);
    background: linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius: 10px;

Can anyone tell me why? and if so how am i able to style my text into speech bubbles?

Html markup (taken from chromes inspector):

<svg id="chatSvg" width="408" height="374" class="room">
<image xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="assets/figures/naked.jpg" preserveAspectRatio="none" x="10" y="10" width="52" height="71">
</image>
<g><text x="200" y="50">hello world</text></g>
</svg>

You have **border-radius** without a **border** specification. Try **border:red solid 5px;** and edit properties to your liking. — Arif Burhan, Mar 31 '16 at 00:58
See: http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg — Kyle Hawk, Mar 31 '16 at 00:59
SVG only supports the CSS properties listed here: https://www.w3.org/TR/2003/REC-SVG11-20030114/propidx.html background is not among them. — Robert Longson, Mar 31 '16 at 05:48

CSS Background Property for Svg text element is being ignored

0 Answers0