Question 197794 in Html Question posted in
Some basic documentation can be found here.

Html – Style text nested inside a SVG

I have the following HTML, dynamicaly generated by TIBCO Spotfire.

div#mod-container text {
  font-family: "Segoe UI";
  color: #000058;
  font-size: 22px;
  font-weight: 500;
}
<div id="mod-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100">
    <g id="backgroundLayer">
      <text class="displayText" x="180" y="50" alignment-baseline="central">
        15918
      </text>
    </g>
  </svg>
</div>

I would like to change some of the style parameters from the inside the SVG, and I have did the following:

div#mod-container text {
  font-family: "Segoe UI";
  color: #000058;
  font-size: 22px;
  font-weight: 500;
}

and

text.displayText {
  font-family: "Segoe UI";
  color: #000058;
  font-size: 22px;
  font-weight: 500;
}

Unfortunately, none of the above approaches have worked. Any idea would be welcome.

Marcio

Tags:

3

Answers


  1. 0

    Only a limited css style rules are applicable in <svg> elements and its sub-elements.

    In your case, replace color, with fill. rest all properties should be working. And yes, both the ways you have used to style the element is correct. Better is to use the css class to style, rather than the ID.

    text.displayText {
    font-family: "Segoe UI" !important;
    fill: #000058 !important; // changed from color to fill
    font-size: 22px !important;
    font-weight: 500 !important;
}

    Check https://css-tricks.com/svg-properties-and-css/ for detailed information of which CSS properties are supported in SVG elements and its sub-elements.

    Login or Signup to reply.
  2. 0 
    div#mod-container svg g#backgroundLayer text.displayText {
  font-family: "Segoe UI" !important;
  color: #000058 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}
    Login or Signup to reply.
  3. 0

    This code should work for you:

    div#mod-container .displayText {
  font-family: "Belanosima"; /* works; just replaced with a random font that is on Google.Fonts for the snippet */
  fill: #000058; /* changed color -> fill */
  font-size: 22px; /* works */
  font-weight: 700; /* works, just replaced 500 with 700 */
  /* font: 700 22px "Belanosima"; <- alternative */
}
    <link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@400;700&display=swap" rel="stylesheet">

<div id="mod-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100">
    <g id="backgroundLayer">
      <text class="displayText" x="180" y="50" alignment-baseline="central">
        15918
      </text>
    </g>
  </svg>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search