SVG 中的两条连续中间锚定线

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="140" width="700" style="font-size:100px;font-family:serif"> 
<text x="350" y="75" fill="blue" text-anchor="middle"
     style="line-height:115%;text-anchor:middle;">BIG LINE</text>
  <text x="350" y="120" fill="blue" text-anchor="middle"
       style="text-anchor:middle;font-size:20%">This is a very long line with a lot of text</text>
</svg>

在我的查看器中没有居中第二行。（我在中间加倍以使其更好！如何做到这一点？

这是一个相关但不相同的问题：我可以将多行放入一个文本中吗？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="140" width="700" style="font-size:100px;font-family:serif"> 
<text x="350" y="75" fill="blue" text-anchor="middle"
     style="line-height:115%;text-anchor:middle;">BIG LINE<br/>no</text>
</svg>

但是 SVG 不能断线。

我的最终目的是有一个居中的标题，然后是一个较小字体但较长的居中标题，该标题在我的 html 浏览器中可扩展以拉伸页面的宽度。 SVG 似乎是最好的方法...或。注意：换行符是旁白。真正的问题是居中。

<br>不是

有效的SVG元素。您不能在 SVG 文档中随机插入 HTML 标记。

如果确实需要包含 HTML，可以使用 <foreignObject> 元素。

<svg height="300" width="700" style="font-size:100px;font-family:serif"> 
    <foreignObject x="100" width="500" height="550">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml"
        style="font-size:100px; line-height:115%; color:blue; text-align: center;">
          <p>BIG LINE<br/>no</p>
      </body>
    </foreignObject>
    <text x="350" y="120" fill="blue" text-anchor="middle"
       style="text-anchor:middle;font-size:20%">This is a very long line with a lot of text</text>
</svg>

在这里演示

相关内容

最新更新

热门标签：