Question

如果我在char内有两个text的堆积块，第二个更大，第二个被切断。

svg

我如何标记这个以便更长时间不被切断？

Answer 1

你基本上有三个选择

增加<svg>元素的宽度。您可以将其设为100％，这将是<svg>元素容器的大小。
使字体变小，使文字适合<svg>元素
使用更多<tspan>元素在多行显示文字

我刚刚在下面任意扩大了第二个<svg>元素。

＆＃13;

    <div id="fixed-target" style="display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width="654" height="83"> 
                <text text-anchor="middle" x="50%" y="59" font-family="Abbey" font-size="60px" 
 style="font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan dy="15">Some test text</tspan>
         </text>                          
      </svg>      
    </div>
    <div id="fixed-target" style="display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width="1554" height="83"> 
                <text text-anchor="middle" x="50%" y="59" font-family="Abbey" font-size="60px" 
 style="font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan dy="15">A very very very long block of test text</tspan>
         </text>                          
      </svg>      
    </div>

＆＃13;

居中多个<svg>元素块

1 个答案: