Question

是否可以在不使用dy属性的情况下在SVG中显示多行文本？我使用SVG 1.1但可能能够使用1.2。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" font-size="15">
    <tspan>tspan line 1</tspan>
    <tspan>tspan line 2</tspan>
    <tspan>tspan line 3</tspan>
  </text>
</svg>

＆＃13;

我输入了上面的代码。我希望文本全部齐平到左边，每个tspan都是一个新行。 tspan是我唯一可以使用的标签吗？我希望SVG使用换行符垂直定位文本行。我不想手动输入dy。

根据我所读到的内容，每一行应显示在另一行之下。他们是，但他们也交错。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="0" font-size="15">
    <tspan dy="15">tspan line 1</tspan>
    <tspan dy="15">tspan line 2</tspan>
    <tspan dy="15">tspan line 3</tspan>
  </text>
</svg>

＆＃13;

我想我需要添加x属性。如果要将dy属性设置为固定值，更改字体大小时会发生什么？

这比我开始做的更好：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve">
  <text x="0" y="0" font-size="15" font-family="courier new" dy="0">
    <tspan x="0" dy="15">tspan line 1</tspan>
    <tspan x="0" dy="15">tspan line 2</tspan>
    <tspan x="0" dy="15">tspan line 3</tspan>
  </text>
</svg>

＆＃13;

有没有办法将x和dy应用于所有tspan s？可能是line-height元素上的text这样的属性？

看起来文本标签没有设置delta y的属性。在评论中建议使用JQuery设置所有x的{{1}}属性。看起来tspan属性可以接受其他类型的值，例如积分和百分比！？有没有办法将dy设置为其父文本元素字体大小的120％的值？我试图将其设置为120％，但它似乎并没有像我期望的那样工作。当我在dy属性中设置120％时，它会离开屏幕。当我将其设置为dy或12时，它会保持在同一位置。如果我将其设置为12px，则会稍微移动但不是120％或12px。

http://codepen.io/anon/pen/PqBRmd

看起来它可以接受以下任何一种：
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

我还查找了12%和dy的可接受的值类型，我无法理解http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute.

更新4：
谢谢你到目前为止的答案。看起来有一种方法可以显示相对间隔开的多行文本。请参阅下面的答案。

Answer 1

看起来这样会一个接一个地排列这些行，而不会在每个$con = mysqli_connect("localhost", "root", "", ""); if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } $cid = $_GET['cid']; $tid = $_GET['tid']; //$userid = ( isset( $_SESSION['user'] ) ? $_SESSION['user'] : "" ); //Prepared SELECT stmt $stmt = $con->prepare("SELECT * FROM forum_topics WHERE `category_id`=? AND id=? LIMIT 1"); if ( !$stmt || $con->error ) { die('Select topics prepare() failed: ' . htmlspecialchars($con->error)); } if(!$stmt->bind_param('ii', $cid, $tid)) { die('Select topics bind_param() failed: ' . htmlspecialchars($stmt->error)); } if(!$stmt->execute()) { die('Select topics execute() failed: ' . htmlspecialchars($stmt->error)); } $numrows = mysqli_num_rows($stmt); if($numrows == 1){ echo "<table width='100%'>"; if ( $_SESSION['user'] ) { echo "<tr><td colspan='2'><input type='submit' value='Add Reply' onClick=\"window.location = 'forum_post_reply.php?cid=".$cid."$tid=".$tid."'\"> <hr />"; } else { echo "<tr><td colspan='2'><p>Please log in to add your reply</p><hr /></td></tr>"; } while($row = mysqli_fetch_assoc($stmt)){ //Prepared SELECT stmt to get forum topics $stmt2 = $con->prepare("SELECT * FROM forum_posts WHERE `category_id`=? AND topic_id=?"); if ( !$stmt2 || $con->error ) { die('Select topics prepare() failed: ' . htmlspecialchars($con->error)); } if(!$stmt2->bind_param('ii', $cid, $tid)) { die('Select topics bind_param() failed: ' . htmlspecialchars($stmt2->error)); } if(!$stmt2->execute()) { die('Select topics execute() failed: ' . htmlspecialchars($stmt2->error)); } while($row2 = mysqli_fetch_assoc($stmt2)){ echo "<tr><td valign='top' style='border: 1px solid #000000;'> <div style='min-height: 125px;'>".$row['topic_title']."<br /> by ".$row2['post_creator']." - " .$row2['post_date']. "<hr />" . $row2['post_content'] ."</div></td> <td width='200' valign='top' align='center' style='border: 1px solid #000000;'>User Info Here!</td></tr> <tr><td colspan='2'><hr /></td></tr>"; } } } else { echo "<p>This topic does not exist.</p>"; }中对字体大小进行硬编码。字体为15px：

＆＃13;

tspan

＆＃13;

如果更改字体大小，则线条之间的距离将继续<svg style="border:1px solid black" > <text x="0" y="0" font-size="15" dy="0"> <tspan x="0" dy=".6em">tspan line 1</tspan> <tspan x="0" dy="1.2em">tspan line 2</tspan> <tspan x="0" dy="1.2em">tspan line 3</tspan> </text> </svg>或120%。1.2em。字体为20px：

＆＃13;

<svg style="border:1px solid black" >
    <text x="0" y="0" font-size="20" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

＆＃13;

示例 - http://codepen.io/anon/pen/oXMVqo

Answer 2

tspan是正确的方法。这就是：

<tspan x="10" dy="15">tspan line 1</tspan>

参考：http://tutorials.jenkov.com/svg/tspan-element.html

Answer 3

只计算高度：

var drawx=part.x||0;
var drawy=part.y||0;
var fontSize=part.fontSize||14; 
var lineHeight=part.lineHeight||1.25; 
var style=part.style||""; 
var fontFamily=part.fontFamily||"Arial"; 
var text=part.text.split('\n').map(function(a,i){ return '<tspan x="'+drawx+'" y="'+(drawy+fontSize*lineHeight+i*fontSize*lineHeight)+'">'+a+'</tspan>' }).join('\n');

tqrSvg+='<text x="'+drawx+'" y="'+drawy+'" style="'+style+'" font-family="'+fontFamily+'" font-size="'+fontSize+'">'+text+'</text>'

Answer 4

以防对某人有帮助：

如果要从Illustrator生成SVG，则可以绘制多条平行线，并使用“路径上的文本”工具创建连续的段落。

如何在SVG中显示多行文字？

4 个答案: