将多个 <svg> 块居中元素 [英] Centering multiple blocks of &lt;svg&gt; elements

问题描述

如果我在 svg 中有两个堆叠的 text 块，第二个更大，第二个被切断.

 <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">一些测试文本</tspan></svg>

<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">一个非常非常长的测试文本块</tspan></svg>

我怎样才能把它标记出来，这样更长的就不会被切断?

解决方案

这里基本上有 3 个选项

1. 增加 元素的宽度.您可以将其设为 100%，这将是 元素容器的大小.
2. 将字体变小，使文本适合 元素
3. 使用更多 元素将文本显示在多行上

我刚刚将下面的第二个 <svg> 元素设置为任意宽.

 <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">一些测试文本</tspan></svg>

<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">一个非常非常长的测试文本块</tspan></svg>

If I have two stacked blocks of text within svg, with the second being larger, the second one gets cut off.

    <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="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">A very very very long block of test text</tspan>
         </text>                          
      </svg>      
    </div>

How can I mark this up so the longer one is not cut off?

解决方案

You've basically got 3 options here

1. Increase the width of the <svg> element. You could make it 100% which would be the size of the <svg> element's container.
2. Make the font smaller so the text fits in the <svg> element
3. Use more <tspan> elements to display the text over multiple lines

I've just made the second <svg> element arbitrarily wider below.

    <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>

这篇关于将多个 <svg> 块居中元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！