Question

<?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似乎是最好的方式......也许吧。注意：换行符是旁边的。真正的问题是中心。

Answer 1

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

Demo here

svg中连续两条中间锚定线？

1 个答案: