當html字體大小更改時，SVG將文本保留在視口內-有解無憂

遇到問題并且對 SVG 文本不太熟悉

我有以下 svg 文本，當瀏覽器或 html 字體大小設定為 16px 時，它非常適合，但是當用戶增加字體大小時，文本將被截斷。

當 html 字體大小增加時，如何將文本保留在視口內。

這里是 html 默認 16px - https://jsfiddle.net/f7zv60c5/4/

當用戶增加到 18px 時，這里是小提琴 - https://jsfiddle.net/f7zv60c5/5/

這是html

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

uj5u.com熱心網友回復：

正如@enxaneta 所指出的：
rem單位與您的<html>根字體大小相關。
px,em或%單位將相對于您的 svg 用戶單位。

只需給您的<text>元素一個固定的字體大小并將
您的font-size單位更改為em.

全域字體大小更改不會影響 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 class="resize">
  <p>resize me</p>
<svg class="league_name" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>
</div>

<svg class="league_name-relative" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" 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>

如果您的 svg 應該根據當前的字體大小進行縮放：
給它一個相對于字體大小的高度和寬度，如下所示：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529261.html

標籤：csssvg

上一篇：具有動態填充顏色的SVG檔案-Vue

下一篇：畫布的正確漸變