Блог

Пожалуйста, проверьте мою ссылку на код

 <div class="suj_content">
<header class="suj_content_hd">
                        <div id="suj_content_hd_ytb"><iframe class="suj_content_hd_ytb" src="https://www.youtube.com/embed/kOc6ME2J_Us?mute=1amp;amp;loop=1amp;amp;playlist=kOc6ME2J_Usamp;amp;autoplay=1amp;amp;showinfo=0amp;amp;controls=0" width="100%" height="100%" frameborder="0"></iframe></div>
                        <h2>
    <svg id="suj_content_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid slice">
        <defs>
            <mask id="mask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%"></rect>
                <text>
                    <tspan x="0" dy="33.333333333333%" alignment-baseline="middle" text-anchor="start">mittel</tspan><tspan x="0" dy="23.222222222222%" alignment-baseline="middle" text-anchor="start">stand</tspan><tspan x="0" dy="23.222222222222%" alignment-baseline="middle" text-anchor="start">digital</tspan>                 </text>
            </mask>
        </defs>
        <rect x="0" y="0" width="100%" height="100%"></rect>
    </svg>
    </h2>
</header>
 

Как я могу установить ширину и высоту тега SVG в соответствии с его содержимым (тегами tspan). Количество тегов tspan не является фиксированным.

Спасибо

Во-первых: вы используете недопустимый атрибут viewBox. Проценты не допускаются. Значение поля просмотра равно fromX fromY width height .

Я использую окно просмотра, ширина которого равна 41 — ширине ограничивающей рамки текста.

Во-вторых: я подозреваю, что вы намерены вырезать текст из последнего прямоугольника. В этом случае вам нужно, чтобы текст был белым.

 console.log(t.getBBox()) 

 text{font-size:16px;} 

 <svg id="suj_content_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 50" preserveAspectRatio="xMidYMid slice">
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" width="100%" height="100%"></rect>
      <text fill="white" id="t">
        <tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">mittel</tspan>
        <tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">stand</tspan>
        <tspan x="0" dy="25%" dominant-baseline="middle" text-anchor="start">digital</tspan>
      </text>
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)"></rect>
</svg>