SVG keep text inside viewport when html font size changed-CodePudding

Running into a issue and not very familiar with SVG text

I have the following svg text and it fits nicely when browser or html font size is set to 16px , but when a user increases their font size , the text will get cut off.

How can i keep the text inside the viewport when html font size is increased.

here is fiddle with html default 16px - https://jsfiddle.net/f7zv60c5/4/

here is fiddle when user increases to 18px - https://jsfiddle.net/f7zv60c5/5/

Here is the html

<svg  viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%">
    <tspan  style="fill:#080e25">Weapons of</tspan>
    <tspan ></tspan>
    <tspan  style="fill:#B82601">DMD</tspan>
    <tspan  x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan  x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>

CodePudding user response：

As pointed out by @enxaneta:
rem units are relative to your <html> root font-size.
px, em or % units will be relative to your svg user units.

Just give your <text> element a fixed font-size and
change your font-size units to em.

A global font-size change won't affect the svg.

svg{
  width:100%;
  border:1px solid red;
  overflow:visible
}

.league_name-relative{
  height:2em;
  width:auto
}

.resize{
  resize:both;
  padding:0.5em;
  overflow:auto;
  border:1px solid #ccc;
  display:inline-block;
}

.league_name_text {
  font-size: 1.975em
}

.league_slogan_text {
  font-size: 1em;
}

.establshed-svgtext {
  font-size: 0.85em
}

<p style="font-size:10px">Font-size: <input type="range" id="fontSize" min="10" max="72" steps="1"></p>
<div >
  <p>resize me</p>
<svg  viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan  style="fill:#080e25">Weapons of</tspan>
    <tspan ></tspan>
    <tspan  style="fill:#B82601">DMD</tspan>
    <tspan  x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan  x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>
</div>

<svg  viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan  style="fill:#080e25">Weapons of</tspan>
    <tspan ></tspan>
    <tspan  style="fill:#B82601">DMD</tspan>
    <tspan  x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan  x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>

<script>
fontSize.addEventListener('input',e=>{
  let size = e.currentTarget.value;
  document.body.style.fontSize = size 'px';
})

</script>

If your svg should scale according to the current font-size:
Give it a height and width relative to the font-size like so:

.svg{
  height:2em;
  width:auto
}