Svg 将文本放入框中
在我的网站上,我允许用户使用他们指定的文字线创建图片Svg 将文本放入框中,svg,imagemagick,autoresize,Svg,Imagemagick,Autoresize,在我的网站上,我允许用户使用他们指定的文字线创建图片 <text text-anchor="middle" x="50%%" y="%s" font-family="Times New Roman" font-size="55" style="fill:rgb(255,255,255);"> %s </text> 目前我用于imagemagick转换——我指定svg模板,让convert完成其余的工作 下面是负责输出图片中
<text text-anchor="middle" x="50%%" y="%s"
font-family="Times New Roman" font-size="55"
style="fill:rgb(255,255,255);">
%s
</text>
目前我用于imagemagick转换——我指定svg模板,让convert完成其余的工作
下面是负责输出图片中文本的部分代码
<text text-anchor="middle" x="50%%" y="%s"
font-family="Times New Roman" font-size="55"
style="fill:rgb(255,255,255);">
%s
</text>
%
我的问题是,如果用户提供很长的字符串,文本就不适合图像
如果文本不适合图片,我希望文本自动调整为较小的字体。可以使用svg模板吗?如果没有,还有什么其他解决方案您可以在SVG模板中添加脚本,该脚本在加载SVG时调用,并使用getComputedTextLength()调整字体大小。这是一个有点老套的解决方案,但似乎有效 下面是一个快速的示例,它在其中绘制一个框和一些文本。无论文本有多长,都应调整文本大小,使其始终适合框中的内容(至少到目前为止): 要在加载SVG时调用代码,请在SVG标记中包含onload=“int(evt)”
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="80"
onload="init(evt)">
然后实际脚本:
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
maximum_length = 300;
my_text = svgDocument.getElementById('text-to-resize');
for (var font_size=55; font_size>0; font_size--)
{
if(my_text.getComputedTextLength() < maximum_length){break;}
my_text.setAttributeNS(null, "font-size", font_size);
}
}
]]>
</script>
0; 字体大小--)
{
如果(my_text.getComputedTextLength()<最大长度){break;}
my_text.setAttributeNS(空,“字体大小”,字体大小);
}
}
]]>
我只是使用了一个for循环来减小字体大小,直到文本长度小于指定的最大值;我相信有更好的方法来调整文本的大小
最后,实际文本和框:
<rect id="rect1" x="20" y="10" width="320" height="50" fill="white" stroke="black"/>
<text id="text-to-resize"
text-anchor="middle"
x="170" y="50"
font-family="Times New Roman" font-size="55">
whatever text
</text>
</svg>
无论文本是什么
如果更改文本,则字体大小应更改,以使其适合框内。您可能还需要更改x和y值以正确地将文本居中。通过放弃svg并使用imagemagick convert和mvg模板完成所有操作来解决此问题 下面是一个简化脚本示例,以防有人追求类似的东西 脚本将图像和标题放在画布上。标题是使用单独的convert命令创建的,保存为临时文件,然后放在画布上
#!/bin/sh
TEMPLATE="
push graphic-context
viewbox 0 0 600 600
affine 1 0 0 1 0.0 0.0
push graphic-context
fill 'rgb(0,0,0)'
rectangle 0,0 600,600
pop graphic-context
push graphic-context
image Over 38,38 338,338 '%s'
pop graphic-context
push graphic-context
image Over 36,400 529,55 '%s'
pop graphic-context
pop graphic-context
";
#1. creating label fitting specified proportions
#2. converting mvg template to jpeg image (and trimming it in process)
#3. removing temp file with label
convert -size 529x55 -background black -family "Times New Roman" -gravity center -fill white label:"$2" "tmp/$1title.jpg" && printf "$TEMPLATE" "images/$1.jpg" "tmp/$1title.jpg" | convert mvg:- -trim +repage -bordercolor black -border 36 "images/$1converted.jpg" && rm "tmp/$1title.jpg"
#script parameters: $1 is image id, $2 is title text
啊,这将是一个很好的解决方案,但不幸的是,imagemagick convert在将svg转换为jpg时没有执行ecmascript:(哦,太遗憾了。没有ecmascript我不知道该怎么做。另请参见: