CODEWITHSUNDEEP
htmlcsssvg
trinarSK
trinarSK

Reputation: 19

Strange behavior with fill attribute for inline SVG text styled in CSS file

I'm having a problem with CSS styling of inline SVG code in HTML. I have a HTML page index.html, CSS file style.css and SVG file external.svg. In the SVG file I created a few hexagonal objects in symbol tags. I use this file only as library of svg objects. In the HTML file I use inline SVG that's using objects from the SVG file. And the CSS file should change color of some inline SVG text in HTML file.

This is an example of the inlined SVG code from the HTML file. The <use ...> tag imports objects from the SVG file.

<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300">
  <a xlink:href="https://www.google.com" xlink:title="google">
    <use xlink:href="external.svg#hex4" fill="none"/>
    <text font-size="40" font-weight="bold" font-family="DejaVu Sans"> 
      <tspan x="55" y="105">first line</tspan>
      <tspan x="55" y="150">second line</tspan>
      <tspan x="75" y="230">third line</tspan>
    </text>
  </a>
</svg>

The CSS used to style this part of code is this:

#zab4text {
  width: 150px;
  height: 150px;
  fill: red;
}

The result should be a red text in a hexagon. The hexagon is fine, but the text is black. The fill attribute has no effect on the text.

When I want to have a red text I have to give an id directly to the <text> tag and style it. Then it works.

I looked in the inspector in google chrome 55 what's happening. When the fill attribute was for the svg tag as in the example, I saw in the inspector that the fill color for the text was inherited from zab4text but it didn't set the color. If the fill attribute was for the text tag, then it was his fill color and it worked fine.

Could it be some bug in google chrome? When I first opened the HTML page the color was red, but when I opened the link it is pointing to, it changed color to black and I couldn't get the red back. I tried it in firefox 50 and the same behavior.

I know about the google chrome external file behavior, I use simple python3 web server sudo python3 -m http.server 80.

Has somebody any idea what I am making wrong or where is the problem?

Upvotes: 0

Views: 1039

Answers (1)

trinarSK
trinarSK

Reputation: 19

So I found the answer. The line

<text font-size="40" font-weight="bold" font-family="DejaVu Sans">

should be

<text font-size="40" font-weight="bold" font-family="DejaVu Sans" fill="inherit">

then it will take the color from the <svg> tag in all browsers I tried.

Upvotes: 1

Related Questions